javascript - 限制表单中的复选框

Question

我有一个带有一组复选框的 HTML 表单，如何让用户只能检查固定数量的复选框

Answer 1

此示例将在检查每个输入后计算检查输入的数量，并与允许的最大数量进行比较。如果超过最大值，则禁用剩余的复选框。

jQuery(function(){
    var max = 3;
    var checkboxes = $('input[type="checkbox"]');

    checkboxes.change(function(){
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
    });
});

这是一个工作示例 - http://jsfiddle.net/jaredhoyt/Ghtbu/1/

Answer 2

这为每个复选框绑定了一些逻辑，用于检查当前表单中选中了多少个复选框。如果该数字等于 2，我们将禁用所有其他框。

$("form").on("click", ":checkbox", function(event){
  $(":checkbox:not(:checked)", this.form).prop("disabled", function(){
    return $(this.form).find(":checkbox:checked").length == 2;
  });
});

这适用于每个表单，这意味着您可以拥有多个不涉及彼此输入的表单。在下面的演示中，我展示了三个表单，它们都包含三个复选框。2 个复选框的限制仅限于它们各自的形式。

演示：http: //jsbin.com/epanex/4/edit