Количество ограниченных флажков в JS - PullRequest
Новая
       30

Количество ограниченных флажков в JS

1 голос
/ 29 апреля 2020

У меня есть несколько флажков с ограничениями, но он не работает с 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>

Этот код не работает,

Любые предложения будут с благодарностью приняты!

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020 

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

Я использовал это, но эффект для глобального

0 голосов
/ 29 апреля 2020

Вы должны изменить свой скрипт на это - 

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