選択可能なチェックボックスの数に制限を設定する

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

ここにあなたが何をしようとしての簡易版です。基本的には、チェックボックスのクリックイベントをインターセプトすると、デフォルトのアクション（チェックボックスをオンにする）を防ぐことができます。 thisのcheckedの値は、クリックが成功した場合の値になります。チェックボックスをオフにすると、クリックが発生します。また、チェックボックスの数が制限値以下であれば、クリックが発生します。それ以外の場合は、チェックボックスのチェックを停止します。私はデモンストレーションのために、この例の制限を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" />