我有一个表格,每行都有一个复选框,下面有一个按钮。如果选中至少一个复选框,我想禁用该按钮。
<tbody>
<tr>
<td>
<input class="myCheckBox" type="checkbox"></input>
</td>
</tr>
</tbody>
<button type=submit id="confirmButton"> BUTTON </button>
我想出的jQuery实现了以下目标:
$('tbody').click(function () {
$('tbody tr').each(function () {
if ($(this).find('.myCheckBox').prop('checked')) {
doEnableButton = true;
}
if (!doEnableButton) {
$('#confirmButton').prop('disabled', 'disabled')
}
else {
$('#confirmButton').removeAttr("disabled");
}
});
});
当然,这不起作用。否则我不会在这里。它所做的只是响应最低的复选框(例如,当选中/取消选中最低按钮时,启用/禁用按钮)。
我制作了一个JSFIddle here,虽然它没有显示与本地相同的行为。
有没有人知道我如何能够完成它对所有复选框的响应并禁用按钮(如果它们全部被禁用)?
答案 0 :(得分:14)
试试这个:
var checkBoxes = $('tbody .myCheckBox');
checkBoxes.change(function () {
$('#confirmButton').prop('disabled', checkBoxes.filter(':checked').length < 1);
});
checkBoxes.change(); // or add disabled="true" in the HTML
解释,我改变了什么:
答案 1 :(得分:4)
添加一个事件处理程序,该事件处理程序在更改复选框时触发,并查看是否有任何复选框,并正确设置disabled属性:
var boxes = $('.myCheckBox');
boxes.on('change', function() {
$('#confirmButton').prop('disabled', !boxes.filter(':checked').length);
}).trigger('change');
答案 2 :(得分:2)
试试这个:
$('tbody').click(function () {
if ($('.myCheckBox:checked').length >= 1) {
$('#confirmButton').prop("disabled", true);
}
else {
$('#confirmButton').prop("disabled", false);
}
});
答案 3 :(得分:-1)
尝试这个:
let $cbs = $(".myCheckBox").change(function() {
if ($cbs.is(":checked")){
// disable #confirmButton if at least one checkboxes were checked
$("#confirmButton").prop("disabled", false);
} else {
// disable #confirmButton if all checkboxes were unchecked
$("#confirmButton").prop("disabled", true);
}
});