如果复选框选中禁用其他，如果未选中启用所有 JavaScript？答案

【问题标题】：If check box checked disable other, if unchecked enable all JavaScript?如果复选框选中禁用其他，如果未选中启用所有 JavaScript？
【发布时间】：2017-09-08 17:17:30
【问题描述】：

我有一组复选框按钮，如果我单击并选中一个，我希望将其他复选框设置为禁用。此外，如果我单击相同并取消选中我希望启用所有这些。如果我选中了复选框，我的逻辑就可以工作，但如果我再次单击，它们都会被禁用。这是我的代码：

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

选中复选框时，我当前的代码未能将禁用属性设置为 true 和 false。如果您发现我的代码中的问题出在哪里，请告诉我。我试图让这个功能适用于任何一组复选框。如果您看到任何改进的方法，我想听听。

【问题讨论】：

愚蠢的问题。你能用单选按钮代替吗？如果它们具有相同的 Name 属性，则不能选择超过 1 个
我必须使用复选框元素，问题可能很愚蠢，但如果可能的话，我正在努力让它发挥作用。
如果我希望所有这些都被取消选中。

标签： javascript html checkbox

【解决方案1】：

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

<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 声明有效。它区分复选框是选中还是未选中，然后执行所需的功能。

【讨论】：

我有一个问题，我不确定这是否是最好的方法。加载页面后，我必须根据数据库中的值检查我的复选框。可能会选中该组中的一个复选框，如果选中，那么我必须禁用具有相同元素名称的其余复选框。我应该尝试使用相同的函数还是应该是单独的 javascript 函数？
@espresso_coffee 您可以使用相同的功能。您可以根据数据库中的数据在页面加载后触发点击
但是我会在我的函数中传递值，这与函数现在的工作方式不同。我试过了，但没有奏效。这是我尝试过的： ckChange('#Trim(myData.progress)#');
您可以使用 jquery 触发对该元素的点击，就像您在 dom 上点击它一样
stackoverflow.com/questions/8206565/…

【解决方案2】：

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

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>

【讨论】：

【解决方案3】：

你去吧，随心所欲地工作。

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

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

}

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

【讨论】：

【解决方案4】：

另一种可能的实现方式：

function ckChange(el) {
  var ckName = document.getElementsByName(el.name);
  if (el.checked) {
    for (var i = 0; i < ckName.length; i++) {
      ckName[i].disabled = ckName[i] !== el;
    }
  } else {
    for (var i = 0; i < ckName.length; i++) {
      ckName[i].disabled = false
    }
  }

}

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

【讨论】：

【解决方案5】：

我的实现，我有点脏。我稍后会重构

function DsChecks(value){   var chcks = []
      chcks = document.getElementsByName("tipoPerfil")
      for(var i = 0; i < chcks.length; i++){
           chcks[i].disabled = true;
      }
      for(var i = 0; i < chcks.length; i++){
         if(chcks[i].value == value && chcks[i].checked){
              chcks[i].disabled = false;
         }
         else if(chcks[i].value == value && !chcks[i].checked){
          for(var i = 0; i < chcks.length; i++){
          chcks[i].disabled = false;
            }
         }
      }

 }

【讨论】：