если установлен флажок 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

Я бы просто пропустил все прослушиватели событий и использовал их при изменении события на столе. Я бы использовал querySelectorAll для подсчета и получения непроверенных флажков. Это решение позволяет пользователю go вернуться и внести изменения в свой выбор.

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

Answer 2

Выполните всю вашу обработку событий в JavaScript, не с HTML атрибутами событий .

Далее, не используйте getElementsByName() вместо используйте querySelectorAll().

Кроме того, нет необходимости в id s на флажках или 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>