Как сделать серым флажки, которые не отмечены?

#javascript

Вопрос:

У меня есть неупорядоченные списки ввода флажков.Как только ввод отмечен, я хочу, чтобы остальные были выделены серым цветом с возможностью проверки другого ввода, который также будет выделен.

вместо того, чтобы отключать переключение, добавьте / удалите класс grey

JS в моем фрагменте — самый близкий пример, который я смог найти, но это не соответствует моей цели, поскольку отключает флажки, я просто хочу, чтобы они были серыми

 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;
      } 
    }    
}

 input {
opacity: 1;
}

input.grey {
opacity: 0.5;
}

 <ul>
<li>
  <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1
</li>
<li>
<input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2
</li>
<li>
<input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3
</li>
<li>
<input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4
</li>
<ul>

1. «с возможностью проверки другого ввода, который также будет выделен» Я не понимаю, что вы имеете в виду под этим.

2. вместо того, чтобы отключать переключение, добавьте / удалите класс grey (для которого вы уже создали CSS) … ckName[i].classList.add('grey'); или ckName[i].classList.remove('grey');

3. Почему вы просто не используете input[disabled=true] для этого?

4. Я не хочу, чтобы какие-либо флажки были отключены когда-либо

Ответ №1:

Вместо этого вы можете использовать add/remove класс, отключенный

Кроме того, при снятии флажка проверьте, все ли в данный момент не отмечены, если это так, удалите серый для всех, иначе добавьте серый для отмеченных

 function onChecked(ckName) {
  for (var i = 0; i < ckName.length; i  ) {
    if (!ckName[i].checked) {
      ckName[i].classList.add('grey')
    } else {
      ckName[i].classList.remove('grey')
    }
  }
}

function onUnchecked(ckName) {
  const allUnchecked = [...ckName].every(el => !el.checked)
  if (allUnchecked) {
    for (var i = 0; i < ckName.length; i  ) {
      ckName[i].classList.remove('grey')
    }
  } else {
    for (var i = 0; i < ckName.length; i  ) {
      if (!ckName[i].checked) {
        ckName[i].classList.add('grey')
      }
    }

  }
}

function ckChange(ckType) {
  var ckName = document.getElementsByName(ckType.name);
  var checked = document.getElementById(ckType.id);
  if (checked.checked) {
    onChecked(ckName)
  } else {
    onUnchecked(ckName)
  }
}

 input {
  opacity: 1;
}

input.grey {
  opacity: 0.3;
}

 <ul>
  <li>
    <td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1
  </li>
  <li>
    <input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2
  </li>
  <li>
    <input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3
  </li>
  <li>
    <input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4
  </li>
  <ul>