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

您必须将脚本更改为此 -

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

我使用了它，但对全球的影响