Установка ограничения на количество флажков, которые могут быть выбраны

Question

Я искал другие подобные вопросы здесь и попытался их воспроизвести, но я не уверен, что я делаю неправильно.

Я хочу только один флажок для проверки. Я установил предел limitCal и проверял братьев и сестер.

Кто-нибудь видит, что я делаю неправильно?

jQuery.fn.fadeBoolToggle = function (bool) { 
 
     return bool ? this.fadeIn(400) : this.fadeOut(400); 
 
    }  
 
    function packageSelect() { 
 
     var limitCal = 1; 
 
     $('.calendar-check').on('change', function() { 
 
      $(this).parents('.product-wrap:first').find('.checkmark-img').fadeBoolToggle(this.checked); 
 
      if ($(this).siblings(':checked').length >= limitCal) { 
 
       this.checked = false; 
 
      } 
 
      $('#next1').fadeBoolToggle($('.product-check:checked').length > 0); 
 
      var prods = []; 
 
      $('.calendar-check:checked').each(function() { prods.push($(this).val()) }); 
 
     }); 
 
    }; 
 
    packageSelect();

.calendar-check { 
 
    display: none; 
 
} 
 
.product-wrap { 
 
    width: 100%; 
 
    position: relative; 
 
    display: block; 
 
} 
 
.checkmark-img { 
 
    display: none; 
 
    width: 40%; 
 
    height: auto; 
 
    z-index: 1; 
 
    cursor: pointer; 
 
} 
 
.package-check-toggle { 
 
    position: relative; 
 
    height: 100%; 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.package-setup { 
 
    display: none; 
 
    margin: 40px 0; 
 
    width: 100%; 
 
} 
 

 
#calendar-box-wrap { 
 
    margin: 20px 0; 
 
} 
 
.calendar-box { 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    width: 25%; 
 
    margin: 0 4%; 
 
    position: relative; 
 
} 
 
.calendar-selection-img { 
 
    width: 100%; 
 
    height: auto; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="calendar-box"> 
 
          <div class="product-wrap"> 
 
           <label for="cal-2year" class="package-check-toggle"> 
 
            <img src="images/calendar-package.png" alt="2-year Photo Gift" class="calendar-selection-img"> 
 
            <img src="images/checkmark-circle.png" class="checkmark-img total-center"> 
 
           </label> 
 
           <input type="checkbox" class="calendar-check" id="cal-2year" value="2-year Calendar"> 
 
          </div> 
 
         </div><div class="calendar-box"> 
 
          <div class="product-wrap"> 
 
           <label for="cal-whiteboard" class="package-check-toggle"> 
 
            <img src="images/calendar-package.png" alt="Whiteboard Photo Gift" class="calendar-selection-img"> 
 
            <img src="images/checkmark-circle.png" class="checkmark-img total-center"> 
 
           </label> 
 
           <input type="checkbox" class="calendar-check" id="cal-whiteboard" value="Whiteboard Calendar"> 
 
          </div> 
 
         </div>

Answer 1

Вот упрощенная версия того, что вы пытаетесь сделать. В принципе, перехват события щелчка флажка позволяет вам предотвратить действие по умолчанию (установив флажок). Значение checked для this будет значением, которое было бы, если щелчок будет успешным. Итак, если флажок будет снят, пусть произойдет щелчок. Также пусть щелчок произойдет, если количество отмеченных флажков меньше или равно лимиту. В противном случае установите флажок для проверки. Я установил предел для этого примера как 2 для демонстрации.

var limit = 2; 
 
$('input:checkbox').on('click', function (e) { 
 
    if (!this.checked || $('input:checkbox:checked').length <= limit) { 
 
    return true; 
 
    } 
 
    return false; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox"> 
 
<input type="checkbox"> 
 
<input type="checkbox"> 
 
<input type="checkbox">

Answer 2

const allCheckBoxs = document.querySelectorAll("input") 
 
let limit = 2 
 
allCheckBoxs.forEach(el => { 
 
    
 
    el.addEventListener("click", e => { 
 
    if(el.checked){ 
 
     limit-- 
 
     
 
     if(limit < 0){ 
 
     e.preventDefault(); 
 
     console.log("Sorry, you are over the limit") 
 
     } 
 
     
 
    }else{ 
 
     limit++ 
 
     console.log(limit) 
 
    } 
 
    
 
    }) 
 
    
 
})

<input type="checkbox" /> 
 
<input type="checkbox" /> 
 
<input type="checkbox" /> 
 
<input type="checkbox" />