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>

此代码不起作用，

任何建议将不胜感激！

Answer 1

您必须将脚本更改为此 -&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(".checkbox-limit").on('change', function(evt) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;var limit = parseInt($(this).parent().parent().parent().attr("data-limit"));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log($('input.checkbox-limit:checked').length);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($('input.checkbox-limit:checked').length > limit) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;this.checked = false;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;alert("The limit is " + limit);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp;&nbsp;

Answer 2

&nbsp;$(".checkbox-limit").on('change', function(evt) {&nbsp;var limit = parseInt($(this).parent().parent().parent().attr("data-limit"));&nbsp;console.log($('input.checkbox-limit:checked').length);&nbsp;&nbsp;if($('input.checkbox-limit:checked').length > limit) {&nbsp;this.checked = false;&nbsp;alert("The limit is " + limit);&nbsp;}&nbsp;});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><div class="row js_check_two" data-limit="2">&nbsp; <div class="col-md-12">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox-limit" value="1">1&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; </div>&nbsp; <div class="col-md-12">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox-limit" value="2">2&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; </div>&nbsp; <div class="col-md-12">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox-limit" value="3">3&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; </div>&nbsp; <div class="col-md-12">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox-limit" value="4">4&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; </div></div><br><br><div class="row js_check_two" data-limit="2">&nbsp; <div class="col-md-12">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox-limit" value="7">7&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; </div>&nbsp; <div class="col-md-12">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox-limit" value="8">8&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; </div>&nbsp; <div class="col-md-12">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox-limit" value="9">9&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; </div>&nbsp; <div class="col-md-12">&nbsp; &nbsp; <label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="checkbox-limit" value="10">10&nbsp; &nbsp; &nbsp; &nbsp; </label>&nbsp; </div></div>我使用了它，但对全球的影响