Deaktivieren Sie die Schaltfläche, wenn das Kontrollkästchen nicht aktiviert ist

Question

Ich habe die folgende Tabellenstruktur von einem Rest-Aufruf innerhalb es sind Kontrollkästchen generiert generiert, bevor die Tabelle dort eine statische Schaltflächen erstellt wird, die ich deaktivieren möchte, wenn keines der Kontrollkästchen angeklickt

<div id="divbuttons"> 
    <button id="Reject" type="button">Reject</button> 
    <button id="Approve" type="button">Approve</button> 
</div> 

<table id="GetItems" cellspacing="12"> 
    <tbody> 
    <tr style="background-color: rgb(204, 204, 204);"> 
    <td style="width: 349px;"><strong>Select</strong> 
     <input name="chk" type="checkbox" value="35"> 
    </td> 
    <td style="width: 211px;">&nbsp;</td> 
    <td style="width: 396px;"><strong>Requester: </strong>Test user</td> 
    <td style="width: 149.2px;"><strong>Raised Date:</strong> 29/11/2017</td> 
    <td style="width: 806.8px;" colspan="3">&nbsp;</td></tr><tr> 
    <td style="width: 349px;"><strong>Item Requested For:<br>:</strong>Desktops</td> 
    <td style="width: 211px;"><strong>Bomb<br>&nbsp;</strong>ITSS</td> 
    <td style="width: 396px;"><strong>Department:</strong><br>ITSS Infrastructure</td> 
    <td style="width: 149.2px;"><strong>Job Title:</strong><br>Consultant</td> 
    <td style="width: 376.8px;"><strong>Phone Number:</strong><br>032394</td> 
    <td style="width: 213px;"><strong>Request Type</strong><br>:New Allocation</td> 
    <td style="width: 217px;"><strong>Replacement Type:<br></strong>New Allocation</td> 
    </tr> 
    </tbody> 
</table> 

Wie kann ich das jQuery erreichen

Answer 1

Hier können Sie mit einer Lösung gehen

$('#GetItems tbody').html(`<tr style="background-color: rgb(204, 204, 204);"> 
 
    <td style="width: 349px;"><strong>Select</strong> 
 
     <input name="chk" type="checkbox" value="35"> 
 
    </td> 
 
    <td style="width: 211px;">&nbsp;</td> 
 
    <td style="width: 396px;"><strong>Requester: </strong>Test user</td> 
 
    <td style="width: 149.2px;"><strong>Raised Date:</strong> 29/11/2017</td> 
 
    <td style="width: 806.8px;" colspan="3">&nbsp;</td></tr><tr> 
 
    <td style="width: 349px;"><strong>Item Requested For:<br>:</strong>Desktops</td> 
 
    <td style="width: 211px;"><strong>Bomb<br>&nbsp;</strong>ITSS</td> 
 
    <td style="width: 396px;"><strong>Department:</strong><br>ITSS Infrastructure</td> 
 
    <td style="width: 149.2px;"><strong>Job Title:</strong><br>Consultant</td> 
 
    <td style="width: 376.8px;"><strong>Phone Number:</strong><br>032394</td> 
 
    <td style="width: 213px;"><strong>Request Type</strong><br>:New Allocation</td> 
 
    <td style="width: 217px;"><strong>Replacement Type:<br></strong>New Allocation</td> 
 
    </tr>`); 
 
    
 
$('#GetItems').on('change', 'input[name=chk]', function(){ 
 
    if($(this).is(':checked')) { 
 
    $('#Reject').removeAttr('disabled'); 
 
    $('#Approve').removeAttr('disabled'); 
 
    } else { 
 
    $('#Reject').attr('disabled', true); 
 
    $('#Approve').attr('disabled', true); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divbuttons"> 
 
    <button id="Reject" type="button" disabled>Reject</button> 
 
    <button id="Approve" type="button" disabled>Approve</button> 
 
</div> 
 

 
<table id="GetItems" cellspacing="12"> 
 
    <tbody> 
 
    
 
    </tbody> 
 
</table>

Ich habe table & tbody statisch sind & betrachtet Reihe dynamisch hinzugefügt zu werden.

Da das Kontrollkästchen dynamisch generiert wird, müssen Sie das Änderungsereignis delegieren.

Ich hoffe, diese Lösung wird Ihnen helfen.

Answer 2

diesen Code Versuchen: JSFiddle

$("input[name='chk']").on("change",function(){ 
    if(!$(this).is(':checked')) { 
    $('#Reject').prop('disabled', true); 
    $('#Approve').prop('disabled', true); 
    } else { 
    $('#Reject').prop('disabled', false); 
    $('#Approve').prop('disabled', false); 
    } 
});