表单中的“限制选中复选框”

Limit checked checkbox in a form

本文关键字：复选框 表单      更新时间：2023-09-26

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

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

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/

这会将一些逻辑绑定到每个复选框，该逻辑检查以查看当前表单中选中了多少个复选框。如果该数字等于 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

相关文章：