如果复选框已选中，则禁用其他；如果未选中，则启用所有JavaScript？

Question

我有一组复选框按钮，如果单击并选中一个，我希望将其他复选框设置为禁用。另外，如果我单击相同的内容并取消选中，则我希望所有这些功能都被启用。如果选中此复选框，则我的逻辑起作用，但是如果再次单击，则所有这些都将被禁用。这是我的代码：

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

function ckChange(ckType){
        var ckName = document.getElementsByName(ckType.name);

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

我的当前代码无法在选中复选框时将disable属性设置为true和false。如果您发现我的代码中的问题出在哪里，请告诉我。我试图使此功能适用于任何复选框。如果您有任何改进的方法，我想听听。

Answer 1

又是同样的事情，代码更短。逻辑上“应启用当前复选框，当且仅当（未选中单击的复选框）或（当前复选框是单击的复选框）”

function ckChange(el) {
  var ckName = document.getElementsByName(el.name);
  for (var i = 0, c; c = ckName[i]; i++) {
   c.disabled = !(!el.checked || c === el);
  }
}

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

Answer 2

添加一个简单的if else语句，检查该复选框是否已选中。如果选中，则禁用所有其他复选框。如果未选中，请启用所有复选框

<tr><td><input type="checkbox" name="progress" id="progress1" value="1" tabIndex="1" onClick="ckChange(this)">Test 1</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress2" value="1" tabIndex="1" onClick="ckChange(this)">Test 2</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress3" value="1" tabIndex="1" onClick="ckChange(this)">Test 3</td></tr>
<tr><td><input type="checkbox" name="progress" id="progress4" value="1" tabIndex="1" onClick="ckChange(this)">Test 4</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>

ps。您的代码的问题是for循环无论如何都在执行。因此，如果您选中某项，它将禁用所有未选中的项，但是，如果您取消选中某项，则循环将禁用所有复选框，因为现在所有复选框均处于未选中状态。那就是为什么if我添加的语句起作用的原因。它区分复选框是处于选中状态还是未选中状态，然后执行所需的功能。