限额复选框金额

Question

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

我这个jQuery代码

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

    function() 
    { 
    } 

); 

我需要的是如果用户选择4个复选框，那么所有其他复选框都应该被禁止tryed这begann。

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); 

}); 

demo

Answer 2

这里是一个工作示例。 可能这将是有用的对某些人;-)

$.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 3

这不会禁用其余复选框，但选择更多的预防。我无论如何都会分享，那就是：

的.aspx

<asp:CheckBoxList id="chkList" runat="server" RepeatLayout="Flow" /> 

的.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 = “流” 摆脱恼人的表格式。

Answer 4

提供一个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 5

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

// 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); 
}); 

我发现的唯一的问题是，如果您的验证失败，并输入返回页面就会让用户禁用其他部分之前选择一个额外的对话框。我解决这个问题的方法是在发送带有输入的页面之前，统计检查了多少个并禁用服务器上的其余部分。

希望它可以帮助干杯！

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); 
     }); 
    });