javascript - JS中限制多个复选框的数量

Question

我有多个带有限制的复选框，但它不适用于这样的 JS

$(".checkbox-limit").on('change', function(evt) {
 var limit = parseInt($(this).parent().data("limit"));

if($(this).siblings(':checked').length >= limit) {
       this.checked = false;
       alert("The limit is " + limit)
   }
});

对于这样的html：

<div class="row js_check_two" data-limit="2">
    <div class="col-md-12">
        <label>
            <input type="checkbox" class="checkbox-limit" value="1">
        </label>
    </div>
    <div class="col-md-12">
        <label>
            <input type="checkbox" class="checkbox-limit" value="2">
        </label>
    </div>
    <div class="col-md-12">
        <label>
            <input type="checkbox" class="checkbox-limit" value="3">
        </label>
    </div>
    <div class="col-md-12">
        <label>
            <input type="checkbox" class="checkbox-limit" value="4">
        </label>
    </div>
</div>

此代码不起作用，

任何建议将不胜感激！

标签： javascripthtmlcheckboxlimit

Answer 1

您必须将脚本更改为此 -

            $(".checkbox-limit").on('change', function(evt) {

             var limit = parseInt($(this).parent().parent().parent().attr("data-limit"));
             console.log($('input.checkbox-limit:checked').length);

            if($('input.checkbox-limit:checked').length > limit) {
                   this.checked = false;
                   alert("The limit is " + limit);
               }
            });