Question

有没有更好的方法阻止人们选择比此更多的复选框？

我希望脚本是动态的，具体取决于所应用的类，它始终包含允许的最大值（例如“limit_1”或“limit_2”）。

目前，我正在为每个类实例创建一个函数，但这似乎完全矫枉过正。

有没有更好的方法从课程中取出数字并在函数中使用它来检查和提醒？

$('.limit_1 input[type=checkbox]').on('change', function (e) {
    if ($('.limit_1 input[type=checkbox]:checked').length > 1) {
        $(this).prop('checked', false);
        alert("allowed only 1");
    }
});

$('.limit_2 input[type=checkbox]').on('change', function (e) {
    if ($('.limit_2 input[type=checkbox]:checked').length > 2) {
        $(this).prop('checked', false);
        alert("allowed only 2");
    }
});

Answer 1

您可以先使用.siblings（）方法清理代码。此外，您可以向复选框的直接父项添加HTML data- *属性，其值将随您的更改事件一起检索。使用此方法，您可以使用单个事件侦听器。

此外，这将避免必须定义单独的限制类，这可能需要您操作限制为硬编码的类字符串。通过data- *属性动态定义和检索限制更清晰。

//Parent elements HTML for checkboxes

<div class="checkbox-container" data-limit="2">
   //Checkboxes with lower limit
</div>

<div class="checkbox-container" data-limit="3">
   //Checkboxes with higher limit
</div>


//JS
$('.checkbox-class').on('change', function(e) {
   var limit = parseInt($(this).parent().data("limit"));
   if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
       alert("The limit is " + limit)
   }
});

这是fiddle

Answer 2

一种简单的方法可以声明变量，例如：

var i = 0;

每当用户点击复选框时，检查是否已选中或取消选中，如果已选中

i++

，否则

i--

这可以帮助您检查i == 2？如果在任何时候等于2，请提醒他们不要超过2＆＃39;。希望这就是你要找的东西。

Answer 3

为limit_1, limit_2, ...

提供与limitedChecked相同的课程

在此类

上添加事件处理程序

    $('.limitedChecked input[type=checkbox]').on('change', function(){
        var limit = $(this).parent().attr("class").split(" ").find(element =>element.startsWith("limit_")).slice(-1);

        if ($('.limit_'+ limit +' input[type=checkbox]:checked').length > limit) {
            $(this).prop('checked', false);
            alert("allowed only " + limit);
        }
    })

然后从类中获取.limit_1并获取此字符串的最后一个字符

这是一个有效的Jsfiddle

Answer 4

我实际上得到了它......

$('.step input[type=checkbox]').on('change', function() {
    var num = $(this).parent().parent().parent().parent().attr('class').match(/\d+$/)[0];
    if ($('.limit_'+num+' input[type=checkbox]:checked').length > num) {
        $(this).prop('checked', false);
        alert("allowed only "+num);
    };
});

jQuery限制复选框

4 个答案: