Condition: input:checked with the same class

I would like to have a little help on an enigma that I have. I have a button that changes according to the number of input:checked but I would like to add a condition which is: select of the checkboxes of the same class.

for example can I have 2 or more input.

<input class="banana" type="checkbox" value="Cavendish">
<input class="banana" type="checkbox" value="Goldfinger">
<input class="chocolato" type="checkbox" value="cocoa powder">
<input class="chocolato" type="checkbox" value="milk chocolate">
<input class="apple" type="checkbox" value="honneycrisp">
<input class="apple" type="checkbox" value="granny smith">

I can’t use attribute name or value. it is not possible to modify the inputs.

the condition:

$('input[type="checkbox"]').click(function(){

if($('input[type="checkbox"]:checked').length >=2){

////////
  if (my classes are the same) {
    $('#btn').html("click me").prop('disabled', false);
} else {
 
$('#btn').html("too bad").prop('disabled', true);
}
//////

}

I try with

var checkClass = [];
        $.each($("input[type="checkbox"]:checked"), function() {
            checkClass.push($(this).attr('class'));
        });

I don’t know if I’m going the right way or if I’m complicating the code but a little help would be welcome. For the moment my attempts have been unsuccessful.

Answer

The following function will reference the first checkbox that’s checked className and enable each checkbox that has said className whilst disabling all other checkboxes. Details are commented in Snippet.

// All checkboxes
const all = $(':checkbox');
// Any change event on any checkbox run function `matchCategory`
all.on('change', matchCategory);

function matchCategory() {
  // All checked checkboxes
  const checked = $(':checkbox:checked');
  let category;
  // if there is at least one checkbox checked...
  if (checked.length > 0) {
    // ...enable (.btn)...
    $('.btn').removeClass('off');
    // ...get the class of the first checked checkbox...
    category = checked[0].className;
    // ...disable ALL checkboxes...
    all.attr('disabled', true);
    // ...go through each checkbox...
    all.each(function() {
      // if THIS checkbox has the class defined as (category)...
      if ($(this).is('.' + category)) {
        // ...enable it
        $(this).attr('disabled', false);
        // Otherwise...  
      } else {
        // ...disable and uncheck it  
        $(this).attr('disabled', true).prop('checked', false);
      }
    });
    // Otherwise...
  } else {
    // ...enable ALL checkboxes...
    all.attr('disabled', false);
    // ...disable (.btn)
    $('.btn').addClass('off');
  }
  return false;
}

.off {
  pointer-events: none;
  opacity: 0.4;
}

<input class="beverage" type="checkbox" value="Alcohol">
<label>🍸</label><br>
<input class="beverage" type="checkbox" value="Coffee">
<label>☕</label><br>
<input class="dessert" type="checkbox" value="cake">
<label>🍰</label><br>
<input class="dessert" type="checkbox" value="Ice Cream">
<label>🍨</label><br>
<input class="appetizer" type="checkbox" value="Salad">
<label>🥗</label><br>
<input class="appetizer" type="checkbox" value="Bread">
<label>🥖</label><br>
<button class='btn off' type='button '>Order</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>