如果有很多复选框组，则在选择 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() {&nbsp; &nbsp; var $checked = $(this).parent().parent().find(':checkbox[name="customizecheck"]:checked');&nbsp; &nbsp; var $notChecked = $(this).parent().parent().find(':checkbox:not(:checked)');&nbsp; &nbsp; if ($checked.length == 4)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $notChecked.prop('disabled', true);&nbsp;&nbsp;&nbsp; &nbsp; else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $notChecked.prop('disabled', false);&nbsp;});