disable checkbox after select 4 checkboxes if there are many checkbox groups

Question

I dont know how to explain my question but Im using foreach to repeat a group of checkboxes such as group of drinks and group of foods, I want to disable other checkboxes when I select 4 check boxes but the problem it is diable all check boxes in other groups To be more clear please check the screenshot

 <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

Your checkboxes are in groups/columns so you can use jQuery to check just those checkboxes from parent div.

Here's working jsFiddle: https://jsfiddle.net/9Lvr2c4d/

Here's fixed code:

$('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); 
});