限制复选框金额

我有20个复选框。 如果选中4个复选框，我需要禁用16个复选框。

我尝试用这个jquery代码开始

$("input[type=checkbox][name=cate]:checked").each( function() { } ); 

我需要的是，如果用户选择4个复选框，则应禁用所有其他复选框。

Answer 1

 $("input[type=checkbox][name=cate]").click(function() { var bol = $("input[type=checkbox][name=cate]:checked").length >= 4; $("input[type=checkbox][name=cate]").not(":checked").attr("disabled",bol); }); 

演示

Answer 2

提供id为limit_checkbox的父元素将有助于加速选择，缓存查询可减少缓慢的DOM交互量。

使用“更改”而不是单击否则代码可以通过使用键盘来规避，也可以使用live而不是bind更快。

 // Cache jQuery selection var $checkboxes_to_limit = $("#limit_checkbox").find("input:checkbox[name=cate]"); $checkboxes_to_limit.live("change", function() { if($checkboxes_to_limit.filter(":checked").length >= 4) { $checkboxes_to_limit.not(":checked").attr("disabled","disabled"); } else { $checkboxes_to_limit.removeAttr("disabled"); } }); 

Answer 3

这是一个有效的例子。 对某些人来说可能会有用;-)

 $.fn.limit = function(n) { var self = this; this.click(function(){ (self.filter(":checked").length==n)? self.not(":checked").attr("disabled",true).addClass("alt"): self.not(":checked").attr("disabled",false).removeClass("alt"); }); } $("input:checkbox").limit(3); } 

Answer 4

我发现了一个更灵活的解决方案，可以让您改变不同复选框的限制。

 // Assign a class of limit_checkbox to the containing DIV and // set a data-limit attribute with your limit. $(".limit_checkbox").on("change", function() { var limit = $(this).attr('data-limit'), checkboxes = $(this).find("input:checkbox"), valid = checkboxes.filter(":checked").length >= limit; checkboxes.not(":checked").attr("disabled", valid); }); 

我发现的唯一问题是，如果您的validation失败并返回带有输入的页面，它将让用户在禁用其余部分之前选择一个额外的框。 我解决这个问题的方法是在发送带有输入的页面之前计算已检查的数量并禁用服务器上的其余部分。

希望它有助于干杯！

Answer 5

这不会禁用其余复选框，但阻止选择更多复选框。 无论如何我会分享，这里是：

的.aspx

.js文件

 $(document).ready(function () { LimitCheckboxes('input[name*=chkList]', 3); } function LimitCheckboxes(control, max) { $(control).live('click', function () { //Count the Total Selection in CheckBoxList var totCount = 1; $(this).siblings().each(function () { if ($(this).attr("checked")) { totCount++; } }); //if number of selected item is greater than the max, dont select. if (totCount > max) { return false; } return true; }); } 

PS：确保使用RepeatLayout =“Flow”来摆脱恼人的表格格式。

Answer 6

我的解决方案

 // Function to check and disable checkbox function limit_checked( element, size ) { var bol = $( element + ':checked').length >= size; $(element).not(':checked').attr('disabled',bol); } // List of checkbox groups to check + number of checked alowed var check_elements = [ { id: '.group1 input[type=checkbox]', size: 2 }, { id: '.group2 input[type=checkbox]', size: 3 }, ]; // Run function for each group in list $(check_elements).each( function(index, element) { // Limit checked on window load $(window).load( function() { limit_checked( element.id, element.size ); }) // Limit checked on click $(element.id).click(function() { limit_checked( element.id, element.size ); }); });