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

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上制作了一个演示，尽管它的行为与本地不同。

有人知道如何使它响应所有复选框，并在它们全部都被禁用时禁用该按钮吗？

- user2609980

---

你不应该像这样混合使用 .prop 和 .attr。只需使用 $('#confirmButton').prop('disabled', !doEnableButton)。 - Felix Kling

你在fiddle中没有添加jQuery框架，这就是为什么它与本地不同的原因。 - display-name-is-missing

@DanielLisik 哈哈！:-) - user2609980

@FelixKling，prop中的第二个参数是什么（在您的情况下为！doEnableButton）？ - user2609980

你想要分配给属性的值。 .disabled属性可以有两个值，true或false。 http://api.jquery.com/prop/ - Felix Kling

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

演示

以下是我所做的更改的解释：

• 为了加快速度，缓存了复选框元素列表/数组： var checkBoxes = $('tbody .myCheckBox');
• 使用prop()代替if/else语句来在禁用状态之间切换。
• 使用filter()过滤已缓存的变量/数组checkBoxes，只保留已选中的复选框。
• 在prop的第二个参数中添加了一个条件，当有多个已选中的复选框时给出true，否则返回false。

- Sergio

---

@FelixKling，非常正确！刚刚添加了那个。 - Sergio

@user2609980，很高兴我能帮到你。还添加了一些解释。 - Sergio

Answer 2

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

var boxes = $('.myCheckBox');

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

FIDDLE

- adeneo

---

然而，在最后一个问题中，他将其表述为“如果它们全部被禁用，则禁用按钮”。如果是这样的话，那么我的fiddle可能会有所帮助，因为我完全理解了这个任务。 - VisioN

这个工作得很好，只是像@VisioN所说的那样，方向错了。 - user2609980

@user2609980 - 哦，好的，我误解了“如果至少有一个框被选中，则禁用按钮”的意思？已经修复了。 - adeneo

Answer 3

试试这个：

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

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

 });

DEMO

- display-name-is-missing

Answer 4

试试这个：

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

- sysdotdev

---

这不可能是正确的答案。请仔细阅读问题后再回答！ - ali zarei