Jquery如何计算选中和禁用复选框

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

我的代码在这里不起作用： http ： //jsfiddle.net/mtYtW/18/

我的Jquery：

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

我的HTML：

 
 
 
Feature 1
 
Feature 2
 
Feuture 3
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
 
 
 
Test 1
 
Test 2
 
Test 3
 
Test 4
 
Test 5
 
Test 6
 
  

Answer 1

以下应该可以满足您的需求：

 $("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"); 

通用禁用示例

Answer 2

 $('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); } }); 

工作示例： http ： //jsfiddle.net/mtYtW/48/

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

Answer 3

您的代码很接近，有一些主要问题。

http://jsfiddle.net/mtYtW/37/

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

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

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

你有一个拼写错误的变量名称countcheck不存在，它被countchecked 。

当你真的想要filter时，你正在使用find 。 查找将搜索集合中元素的后代，您想要过滤它们。

当你声明想要禁用AT > 5时你有> 5 5.所以它应该是>= 。

您正在禁用所有复选框，而不仅仅是您所说的未选中，我添加了.not(":checked") 。

最后，我想你可能想要重新启用它们，如果一个未经检查，所以我补充说：

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

Answer 4

看看这个

http://jsfiddle.net/mtYtW/33/

Answer 5

 $(':checkbox').bind('click', function(){ if($(':checkbox:checked').length >= 5) { $(':checkbox').not(':checked').prop('disabled', true); } else { $(':checkbox').not(':checked').prop('disabled', false); } }); 

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

Answer 6

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

工作示例： http ： //jsfiddle.net/Re5uy/6/

Answer 7

一旦选中的复选框计数超过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 {} }); 

工作示例： http ： //jsfiddle.net/mtYtW/30/

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

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