条件：输入：用同一个类检查

Question

我想对我的一个谜有一点帮助。 我有一个根据输入数量变化的按钮：选中 但我想添加一个条件：选择同一类的复选框。

例如，我可以有 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

以下函数将引用选中className 的第一个复选框，并启用每个显示className 的复选框，同时禁用所有其他复选框。详细信息在 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>

Answer 2

类似的东西？

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>
  

Answer 3

事实上它就像Matching Pairs card game

这个答案没有全局 checked_group 变量，并且尊重关于 data attribute see also 用法的 epascarello 消息。
添加对取消选中元素的悔改

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>