条件：输入：同类勾选

Question

我想有一点帮助我的一个谜。我有一个按钮可以根据输入的数量变化：Checked，但我想添加一个条件，它是：选择相同类的复选框。

例如，我可以有2个或更多的输入。

<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">

我不能使用属性名称或值。无法修改输入。

条件：

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

}

我试着用

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

我不知道我的方法是否正确，或者我的代码是否复杂，但一点帮助将是欢迎的。目前我的尝试没有成功。

Answer 1

像那样的事？

null

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>