如果未选中所有复选框,则禁用按钮,如果选中至少一个,则启用它

时间:2013-12-19 17:21:27

标签: javascript jquery checkbox

我有一个表格,每行都有一个复选框,下面有一个按钮。如果选中至少一个复选框,我想禁用该按钮。

<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,虽然它没有显示与本地相同的行为。

有没有人知道我如何能够完成它对所有复选框的响应并禁用按钮(如果它们全部被禁用)?

4 个答案:

答案 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

Demo

解释,我改变了什么:

  • 缓存复选框元素列表/数组以使其更快一些:var checkBoxes = $('tbody .myCheckBox');
  • 删除了if/else语句,并使用prop()在disable = true / false之间进行了更改。
  • 使用filter()过滤了缓存的变量/数组checkBoxes,因此它只会保留选中/选中的复选框。
  • 在prop的第二个参数内添加了一个条件,当有多个复选框时会给true,如果条件不满足则会给出错误。

答案 1 :(得分:4)

添加一个事件处理程序,该事件处理程序在更改复选框时触发,并查看是否有任何复选框,并正确设置disabled属性:

var boxes = $('.myCheckBox');

boxes.on('change', function() {
    $('#confirmButton').prop('disabled', !boxes.filter(':checked').length);
}).trigger('change');

FIDDLE

答案 2 :(得分:2)

试试这个:

$('tbody').click(function () {

   if ($('.myCheckBox:checked').length >= 1) { 
           $('#confirmButton').prop("disabled", true);
       }
   else {
            $('#confirmButton').prop("disabled", false);
   } 

 });

DEMO

答案 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);
    }
});