Condition: input:checked with the same class

user_14327821 0
Viewed 154

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.

input jquery javascript
3 Answers

some thing like that ?

const 
   bt_restart = document.getElementById('bt-restart')
 , chkbx_all  = document.querySelectorAll('input[type=checkbox]')
 ;
var checked_class = ''
  ;
bt_restart.onclick = _ =>
  {
  checked_class = ''
  chkbx_all.forEach(cbx=>
    {
    cbx.checked=cbx.disabled=false
    cbx.closest('label').style = '' 
    })
  }
chkbx_all.forEach(cbx=>
  {
  cbx.onclick = e => 
    {
    if (checked_class === '')  checked_class = cbx.className 
    else if (checked_class != cbx.className  )
      {
      cbx.checked = false
      cbx.disabled = true
      cbx.closest('label').style = 'color: grey' 
      }
    }  
  })
<button id="bt-restart">restart</button>  <br> <br>

 <label>  <input class="banana"    type="checkbox" value="Cavendish"     > a-Cavendish      </label> <br>
 <label>  <input class="banana"    type="checkbox" value="Goldfinger"    > a-Goldfinger     </label> <br>
 <label>  <input class="chocolato" type="checkbox" value="cocoa powder"  > b-cocoa powder   </label> <br>
 <label>  <input class="chocolato" type="checkbox" value="milk chocolate"> b-milk chocolate </label> <br>
 <label>  <input class="apple"     type="checkbox" value="honneycrisp"   > c-honneycrisp    </label> <br>
 <label>  <input class="apple"     type="checkbox" value="granny smith"  > c-granny smith   </label> <br>

user_106690100

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>

user_28132240

In fact it's like a Matching Pairs card game

this answer is without global checked_group variable, and respecting epascarello message about data attribute see also usage.
Adding a repentance on uncheck elements

const 
   bt_restart = document.getElementById('bt-restart')
 , chkbx_all  = document.querySelectorAll('input[type=checkbox]')
 ;
function clearGame()
  {
  chkbx_all.forEach(cbx=>
    {
    cbx.checked = cbx.disabled = false
    cbx.closest('label').style = '' 
    })
  }
bt_restart.onclick = clearGame

chkbx_all.forEach(cbx=>
  {
  cbx.onclick = e => 
    {
    let checkedList = document.querySelectorAll('input[type=checkbox]:checked')  
    if (cbx.checked)
      {
      let checked_group = ''
      checkedList.forEach(cEl=>{ if (cEl !== cbx) checked_group = cEl.dataset.group })
      
      if (checked_group === '')  checked_group = cbx.dataset.group 
      else if (checked_group !== cbx.dataset.group  )
        {
        cbx.checked = false  // you need to uncheck wrong group checkboxes for preserving checkedList
        cbx.disabled = true
        cbx.closest('label').style = 'color: grey' 
        }
      }
    else if (checkedList.length === 0)  // case of cheked repentir
      clearGame()
    }  
  })
<button id="bt-restart">restart</button>  <br> <br>

 <label>  <input data-group="banana"    type="checkbox" value="Cavendish"     > a-Cavendish      </label> <br>
 <label>  <input data-group="banana"    type="checkbox" value="Goldfinger"    > a-Goldfinger     </label> <br>
 <label>  <input data-group="chocolato" type="checkbox" value="cocoa powder"  > b-cocoa powder   </label> <br>
 <label>  <input data-group="chocolato" type="checkbox" value="milk chocolate"> b-milk chocolate </label> <br>
 <label>  <input data-group="apple"     type="checkbox" value="honneycrisp"   > c-honneycrisp    </label> <br>
 <label>  <input data-group="apple"     type="checkbox" value="granny smith"  > c-granny smith   </label> <br>

user_106690100
Related