如果有很多复选框组，则在选择 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); 

});