如果有很多復選框組，請在選中4個復選框后禁用該復選框

Question

我不知道如何解釋我的問題，但是我使用foreach來重復一組復選框，例如一組飲料和一組食物，我想在選擇4個復選框時禁用其他復選框，但問題是所有復選框都無法使用其他組要更清晰，請檢查屏幕截圖

 <div class="option__choices">
  @foreach($groupCustomizes as $key=>$customize)  
   <label class="control control--checkbox option__choice-name">
 <input type="checkbox" name="customizecheck" value="{{$customize->id}}" >
<div class="control__indicator"></div></label>
 @endforeach
  </div>

 $('.option__choices input').on('change', function() {
  if ($(":checkbox[name='customizecheck']:checked").length == 4)                                              
   $(':checkbox:not(:checked)').prop('disabled', true);  
   else                                                     
   $(':checkbox:not(:checked)').prop('disabled', false); 
   });

Answer 1

您的復選框位於組/列中，因此您可以使用jQuery來檢查父div中的那些復選框。

這是工作的jsFiddle： https ://jsfiddle.net/9Lvr2c4d/

這是固定代碼：

$('input').on('change', function() {
    var $checked = $(this).parent().parent().find(':checkbox[name="customizecheck"]:checked');
    var $notChecked = $(this).parent().parent().find(':checkbox:not(:checked)');

    if ($checked.length == 4)                                           
        $notChecked.prop('disabled', true);  
    else                                                     
        $notChecked.prop('disabled', false); 
});