Jquery如何计数选中的复选框和禁用复选框

当有5个复选框时，我试图禁用所有未选中的复选框

我的代码在此不起作用它是：

我的Jquery：

var countchecked = $('table input[type="checkbox"]').find(":checked").length

    if(countcheckhed > 5) {
        $("table input:checkbox").attr("disabled", true);
    } else {}

我的HTML：

<table cellspacing="0" cellpadding="0" width="770px;">
  <tbody><tr style="border: 1px solid green; height: 40px; font-size: 14px;">
    <th>Feature 1</th>
    <th>Feature 2</th>
    <th>Feuture 3</th>
  </tr>

  <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
    <tr>
    <td class="checkit"><input type="hidden" value="0" name="search[windows_is_true]"><input type="checkbox" value="1" name="search[windows_is_true]" id="search_windows_is_true"></td>
    <td>Test 1</td>
    <td>Test 2</td>
    <td>Test 3</td>
    <td>Test 4</td>
    <td>Test 5</td>
    <td>Test 6</td>
  </tr>
</tbody></table>

特征1
专题2
世仇3
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6
测试1
测试2
测试3
测试4
测试5
测试6

以下方法可以满足您的需要：

$("table input[type=checkbox]").click(function(){
var countchecked = $("table input[type=checkbox]:checked").length;

if(countchecked >= 5) 
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",true);
}
else
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",false);
}

$('input[type=checkbox]').not(':checked').attr("disabled","disabled");

}))

（通用）以下选项将禁用所有未选中的复选框：

$("table input[type=checkbox]").click(function(){
var countchecked = $("table input[type=checkbox]:checked").length;

if(countchecked >= 5) 
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",true);
}
else
{
    $('table input[type=checkbox]').not(':checked').attr("disabled",false);
}

$('input[type=checkbox]').not(':checked').attr("disabled","disabled");

---

我想当复选框计数超过5时，您应该禁用其余复选框。如果是这种情况，请尝试以下操作：

$('table input[type="checkbox"]').click(function(){
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length;

    if(countchecked > 4) {
        $("table input:checkbox").not(":checked").attr("disabled", true);
    } else {}
});

$(function(){
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length;

    if(countchecked > 4) {
        $("table input:checkbox").not(":checked").attr("disabled", true);
    } else {}
});

工作示例：

如果要禁用页面加载上的复选框并验证选中的复选框是否超过5个，请尝试以下操作：

$('table input[type="checkbox"]').click(function(){
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length;

    if(countchecked > 4) {
        $("table input:checkbox").not(":checked").attr("disabled", true);
    } else {}
});

$(function(){
    var countchecked = $('table input[type="checkbox"]').filter(":checked").length;

    if(countchecked > 4) {
        $("table input:checkbox").not(":checked").attr("disabled", true);
    } else {}
});

看看这个

---

您的代码很接近，但有几个主要问题

最大的问题是，您的代码只执行onload。您需要在选中其中一个复选框时执行它，即此部分：

$('table input[type="checkbox"]').change(function() {

您有一个拼写错误的变量名

countcheck

不存在，它是

countchecked

当您真正需要

过滤器时，您正在使用
find
。“查找”将搜索集合中元素的后代，您希望对其进行筛选

当您声明要在5时禁用时，您有
>5
。所以它应该是
=

您禁用了所有复选框，而不仅仅是您所说的未选中复选框，我添加了
。not（“：checked”）

最后，我想如果一个未选中，您可能会希望重新启用它们，所以我补充说：

}else{
    $("table input:checkbox").attr("disabled", false);
}

请注意，
prop
是jQuery 1.6独占的。如果jQuery<1.6，请使用
attr

$('table input[type="checkbox"]').click(function(){
    var countcheck = $('table input[type="checkbox"]:checked').length;
    if(countcheck > 4) {
        $("table input:checkbox:not(:checked)").attr("disabled", true);
    }else
    {
        $("table input:checkbox").attr("disabled", false);
    }
});

工作示例：

注意：如果您取消选择五个选项中的一个，此代码将启用复选框

$("table input[type=checkbox]").click(function(){
    var countchecked = $("table input[type=checkbox]:checked").length;
    if(countchecked >= 5) {
        $("table input:checkbox").attr("disabled", true);
    }else{

    }
});

工作示例：
请将您的代码添加到问题中。将来，如果JSFIDLE消失了，这个问题仍然是相关的。您提供的JSFIDLE只是通过代码加载，然后再也不会检查。尝试获取所有复选框并添加一个。单击属性并重新计算复选计数。如何在6个复选框中的一个未选中时启用所有复选框？else语句处理：）您可以选中第一个示例非常感谢！完美的例子“>5”部分将允许选择6个复选框。@holodoc:错过了问题的“当有5个复选框时”部分，并按照OP原始代码使用的条件进行了操作。修正了这句话后，看着人们如何改变他们的解决方案是很有趣的：不会的。它将允许选择6个复选框。