限制复选框数量答案

【问题标题】：Limit Checkbox amount限制复选框数量
【发布时间】：2011-02-27 07:49:16
【问题描述】：

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

我尝试从这个 jquery 代码开始

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

    function()
    {
    }

);

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

【问题讨论】：

标签： jquery checkbox

【解决方案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

【讨论】：

我会通过添加一个 if 语句来检查来修改它： if (bol) { ... (disable code) return false; } - 因为如果你登陆一个已经选中 4 个复选框的新页面，它将允许你在禁用之前检查另一个...
这对我来说非常有效。为我节省了 7 条现有线路和一个循环。

【解决方案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");
    }
});

【讨论】：

这是一个比公认的更好的答案，因为 Woody 提到的原因。如果使用 >= jQuery 1.7，则应将 .live() 替换为 .on() per the docs。

【解决方案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);

}

【讨论】：

谢谢伙计。这是迄今为止我找到的最好的解决方案。简单干净。

【解决方案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);
});

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

希望它可以帮助干杯！

【讨论】：

【解决方案5】：

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

.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="Flow" 来摆脱烦人的表格格式。

【讨论】：

有人有这个的 knockout.js 版本吗？

【解决方案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 );
      });
    });

【讨论】：