根据具有不同 ID 的多个选中复选框的计数启用/禁用按钮答案

【问题标题】：Enable/Disable button based on count of multiple checked checkboxes all with different ID's根据具有不同 ID 的多个选中复选框的计数启用/禁用按钮
【发布时间】：2012-03-31 19:20:13
【问题描述】：

我在这样的表格中有一个复选框列表以及一个按钮：-

<table id="mytable">
<tr><th>checked</th><th>id</th><th>text</th></tr>
<tr><td><input id="cb1" type="checkbox" name="checker1"/></td><td>123</td><td>abc</td></tr>
<tr><td><input id="cb2" type="checkbox" name="checker2"/></td><td>456</td><td>def</td></tr>
<tr><td><input id="cb3" type="checkbox" name="checker3"/></td><td>789</td><td>ghi</td></tr>
<tr><td><input id="cb4" type="checkbox" name="checker4"/></td><td>454</td><td>ghi</td></tr>
<tr><td><input id="cb5" type="checkbox" name="checker5"/></td><td>565</td><td>ghi</td></tr>
</table>

<input type="button" name="myjqbutton" value="My Jquery Button" id="jqb" disabled="true"/>

我想要做的是，只有在选中 1 个或多个复选框时才启用按钮。

最初的想法是我需要计算表格中选中的复选框的数量，我可以使用 .each 将它们计入变量中。

var mytable= document.getElementById('mytable');
$('input:checkbox:checked', mytable).each(function() {
// whatever here
});

但是，每个复选框都需要一个更改的事件来检查计数并根据计数是否 > 0 启用或禁用按钮。

或者有没有更简单的方法来实现我正在寻找的这个功能。

【问题讨论】：

标签： javascript jquery asp.net gridview

【解决方案1】：

你可以的

$('#mytable input:checkbox').change(function(){
  $("#jqb").prop("disabled", $('#mytable input:checkbox:checked').length ===0);
});

【讨论】：

【解决方案2】：

它可以做你想做的事：

$('#mytable input[type=checkbox]').click(function(){
if($('#mytable input[type=checkbox]:selected').size()) > 0) $("#jqb").attr('disabled', 'disabled');
else $('.someElement').removeAttr('disabled');

【讨论】：

【解决方案3】：

if ($('#mytable :checkbox:checked').length) {
    $('#jqb').prop('disabled', false); // Assumes disabled by default
}

【讨论】：

【解决方案4】：

试试这个；

 $("#jqb").prop("disabled", $("#mytable input:checkbox:checked']").length === 0);

【讨论】：

【解决方案5】：

change 事件是必须的，但 jQuery 提供了复杂的选择器来减少计算选中的工作：

$(':checkbox').change(function(e) {
    // for a performance considerationg, to reduce selector lookup, 
    // once a checkbox is checked itself, there must be one or more checkbox checked
    // then the selector finds checked checkbox whose id attribute starts with "cb"
    if (this.checked || $(':checkbox[id^="cb"]:checked).length >= 1) {
        // do stuff
    }
});

【讨论】：