如果选中了6个复选框，则应禁用其余复选框

Question

我找到了一个我确实需要更新或改进的小代码，我无法弄清楚，所以这里是

<tr><td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" 
onClick="ckChange(this)">01</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" 
onClick="ckChange(this)">02</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" 
onClick="ckChange(this)">03</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" 
onClick="ckChange(this)">04</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress5" value="1" tabIndex="1" 
onClick="ckChange(this)">05</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress6" value="1" tabIndex="1" 
onClick="ckChange(this)">06</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress7" value="1" tabIndex="1" 
onClick="ckChange(this)">07</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress8" value="1" tabIndex="1" 
onClick="ckChange(this)">08</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress9" value="1" tabIndex="1" 
onClick="ckChange(this)">09</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress10" value="1" tabIndex="1" 
onClick="ckChange(this)">10</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress11" value="1" tabIndex="1" 
onClick="ckChange(this)">11</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress12" value="1" tabIndex="1" 
onClick="ckChange(this)">12</td></tr>

<script>
function ckChange(ckType){
var ckName = document.getElementsByName(ckType.name);
var checked = document.getElementById(ckType.id);

if (checked.checked) {
  for(var i=0; i < ckName.length; i++){

      if(!ckName[i].checked){
          ckName[i].disabled = true;
      }else{
          ckName[i].disabled = false;
      }
  } 
}
else {
  for(var i=0; i < ckName.length; i++){
    ckName[i].disabled = false;
  } 
}    
}
</script>

您可以检查它并查看它的作用，但是简单地将其显示为12个复选框，当我标记其中一个时，其余复选框将被禁用。我需要的是，无论有多少个复选框，当我选中其中的6个（不仅是一个）时，其余的复选框都将被禁用。我需要进一步改进或更新，但是现在让我们不要花费太多时间。

Answer 1

使用JavaScript not with HTML event attributes完成所有事件处理。

接下来，don't use getElementsByName()，而不是使用querySelectorAll()。

此外，只要您可以使用默认制表符，就无需在复选框上id或tabindex上。

其他内容，请参见下面的内联评论：

<table>
  <tr><td><input type="checkbox" name="progress" value="1">01</td></tr>
  <tr><td><input type="checkbox" name="progress" value="2">02</td></tr>
  <tr><td><input type="checkbox" name="progress" value="3">03</td></tr>
  <tr><td><input type="checkbox" name="progress" value="4">04</td></tr>
  <tr><td><input type="checkbox" name="progress" value="5">05</td></tr>
  <tr><td><input type="checkbox" name="progress" value="6">06</td></tr>
  <tr><td><input type="checkbox" name="progress" value="7">07</td></tr>
  <tr><td><input type="checkbox" name="progress" value="8">08</td></tr>
  <tr><td><input type="checkbox" name="progress" value="9">09</td></tr>
  <tr><td><input type="checkbox" name="progress" value="10">10</td></tr>
  <tr><td><input type="checkbox" name="progress" value="11">11</td></tr>
  <tr><td><input type="checkbox" name="progress" value="12">12</td></tr>
</table>

<script>
  // Do you event handling in JavaScript, not with HTML event attributes.
  
  // Just set up a click event handler on the table and let the clicks
  // from the checkboxes bubble up to the table to be handled there.
  document.querySelector("table").addEventListener("click", ckChange);
  
  // Get a reference to all the checkboxes
  let boxes = document.querySelectorAll("table input[type='checkbox']");
 
  function ckChange(event){
    // Determine if it was a checkbox that got clicked
    if(event.target.type = "checkbox"){
      // Get the count of all the checked checkboxes
      let checkedCount = document.querySelectorAll("table input[type='checkbox']:checked").length;
      
      // If the count is 6 or more disable all of them
      if(checkedCount >=6){
        // Loop over all the checkboxes
        boxes.forEach(function(box){
          box.disabled = true;  // Disable the box
        });
      }
    }
  }
</script>

Answer 2

我只是跳过所有事件侦听器，并在表上使用change事件。我将使用querySelectorAll进行计数并获取未选中的复选框。该解决方案允许用户返回并对其选择进行更改。

// grab parent that contains all of the checkboxes
let tbody = document.querySelector("#progressTable tbody")
// store state so we do not waste time removing disabled
let isDisabled

// bind just one event listener, use event delegation 
tbody.addEventListener('change', function() {
  // select the checked checkboxes and get the count
  const checkedCount = document.querySelectorAll('[name="progress"]:checked').length
  // see if we are maxed out
  const isMaxed = checkedCount >= 6
  // if we are maxed out ot they unchecked a checkbox
  if (isMaxed || isDisabled) {
    // set flag based on maxed out (true) or they removed one 
    // so we are no longer maxed out
    isDisabled = isMaxed
    // grab all the unchecked checkboxes
    const unchecked = document.querySelectorAll('[name="progress"]:not(:checked)')
    // loop over and either disable or enable it
    unchecked.forEach( function (cb) {
      cb.disabled = isDisabled
    })  
  }
})

<table id="progressTable">
  <tbody>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
    <tr><td><input type="checkbox" name="progress" /></td></tr>
  </tbody>
</table>