[英]Disable Button if checkbox is not checked
我有下面的表格結構,它是通過rest調用生成的,其中是輸入復選框,在創建表格之前,我要禁用一個靜態按鈕,除非單擊任何復選框
<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;"> </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"> </td></tr><tr>
<td style="width: 349px;"><strong>Item Requested For:<br>:</strong>Desktops</td>
<td style="width: 211px;"><strong>Bomb<br> </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>
如何使用jQuery實現此目的
嘗試以下代碼: 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);
}
});
在這里你有一個解決方案
$('#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;"> </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"> </td></tr><tr> <td style="width: 349px;"><strong>Item Requested For:<br>:</strong>Desktops</td> <td style="width: 211px;"><strong>Bomb<br> </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>
我已經考慮過table
& tbody
是靜態的&行正在動態添加。
由於復選框是動態生成的,因此您需要委派change事件。
希望此解決方案對您有所幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.