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

Posted 2023-05-09

【中文标题】如果所有复选框都未选中，则禁用按钮，如果至少选中一个，则启用它

【英文标题】：Disable button if all checkboxes are unchecked and enable it if at least one is checked

【发布时间】：2014-01-08 09:16:56

【问题描述】：

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

<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，尽管它没有显示与本地相同的行为。

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

【问题讨论】：

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

你没有在你的小提琴中添加jQuery作为框架，这就是为什么它与本地不一样。

@DanielLisik 啊哈！ :-)

@FelixKling prop 中的第二个参数是什么（在您的情况下为 !doEnableButton？

要分配给属性的值。 .disabled 属性可以具有 true 或 false 值。 api.jquery.com/prop

【参考方案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。

【讨论】：

@FelixKling，非常真实！刚刚添加了。

@user2609980，很高兴我能提供帮助。还添加了一些解释。

【参考方案2】：

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

var boxes = $('.myCheckBox');

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

FIDDLE

【讨论】：

但是在最后一个问题中，他将其表述为 "...如果按钮全部禁用，则禁用按钮"。如果是这样，那么我的fiddle 可能会有所帮助，因为我正是通过这种方式理解了这项任务。

这就像一个魅力，只是它是错误的方式，正如@VisioN 所说;-)。

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

【参考方案3】：

试试这个：

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

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

 );

DEMO

【参考方案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);
    
);

【讨论】：

这不是正确的答案。回答时请仔细阅读问题！