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

Disable button if all checkboxes are unchecked and enable it if at least one is checked

提问by Erwin Rooijakkers

I have a table with a checkbox in each row and a button below it. I want to disable the button if at least one checkbox is checked.

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

<tbody>
    <tr>
        <td>
            <input class="myCheckBox" type="checkbox"></input>
        </td>
    </tr>
</tbody>
<button type=submit id="confirmButton"> BUTTON </button>

The jQuery I came up with to accomplish this is the following:

我想出的实现此目的的 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");
        }
    });
});

Naturally, this does not work. Otherwise I would not be here. What it does do is only respond to the lowest checkbox (e.g., when the lowest button is checked/unchecked the button is enabled/disabled).

自然，这行不通。否则我不会在这里。它所做的只是响应最低的复选框（例如，当最低的按钮被选中/取消选中时，按钮被启用/禁用）。

I made a JSFIddle herealthough it does not show the same behaviour as locally.

我在这里做了一个 JSFIddle ，虽然它没有显示与本地相同的行为。

Does any know how I can accomplish that it responds to all checkboxes and disables the button if they are ALL disabled?

有谁知道我如何实现它响应所有复选框并禁用按钮（如果它们都被禁用）？

回答by Sergio

Try this:

试试这个：

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

演示

Explanation, to what I changed:

解释，我改变了什么：

• Cached the checkbox element list/array to make it a bit faster: var checkBoxes = $('tbody .myCheckBox');
• removed the if/elsestatement and used prop()to change between disable= true/false.
• filtered the cached variable/array checkBoxesusing filter()so it will only keep the checkboxes that are checked/selected.
• inside the second parameter of prop added a condition that will give truewhen there is more than one checked checkbox, or false if the condition is not met.

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

回答by adeneo

Add an event handler that fires when a checkbox is changed, and see if there are any checked boxes, and set the disabled property appropriately :

添加一个在复选框更改时触发的事件处理程序，并查看是否有任何复选框，并适当设置禁用属性：

var boxes = $('.myCheckBox');

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

FIDDLE

小提琴

回答by display-name-is-missing

Try this:

试试这个：

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

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

 });

DEMO

演示

回答by sysdotdev

Try this one:

试试这个：

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