Question

我有复选框输入的无序列表。选中输入后，我希望其余部分显示为灰色，可以选择选中另一个也将突出显示的输入。

添加/删除类灰色

，而不是禁用切换

我的代码段中的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>

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

如何将未选中的复选框显示为灰色？

1 个答案: