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

Question

I have multiple checkboxes with limits but it doesn't work with JS like this

$(".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)
   }
});

and for html like this:

<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>

This code not working,

Any suggestions would be gratefully receive!

Answer 1

You have to change your script to this -

            $(".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);
               }
            });  

Answer 2

 $(".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); } });

 <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"> <div class="col-md-12"> <label> <input type="checkbox" class="checkbox-limit" value="1">1 </label> </div> <div class="col-md-12"> <label> <input type="checkbox" class="checkbox-limit" value="2">2 </label> </div> <div class="col-md-12"> <label> <input type="checkbox" class="checkbox-limit" value="3">3 </label> </div> <div class="col-md-12"> <label> <input type="checkbox" class="checkbox-limit" value="4">4 </label> </div> </div> <br> <br> <div class="row js_check_two" data-limit="2"> <div class="col-md-12"> <label> <input type="checkbox" class="checkbox-limit" value="7">7 </label> </div> <div class="col-md-12"> <label> <input type="checkbox" class="checkbox-limit" value="8">8 </label> </div> <div class="col-md-12"> <label> <input type="checkbox" class="checkbox-limit" value="9">9 </label> </div> <div class="col-md-12"> <label> <input type="checkbox" class="checkbox-limit" value="10">10 </label> </div> </div>

I used that but effect for global