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

Question

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

<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尽管它没有表现出与本地相同的行为。

有谁知道我如何才能响应所有复选框并在所有复选框都被禁用时禁用按钮？

Answer 1

试试这个:

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，如果不满足条件，则返回 false。