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

If check box checked disable other, if unchecked enable all JavaScript?

提问by espresso_coffee

I have group of checkbox buttons, if I click and check one I want other check boxes to be set to disable. Also if I click to the same and uncheck I want all of them to be enabled. My logic works if I checked the checkbox but if I click again all of them are disabled. Here is my code:

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

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

My current code is failing to set disable attribute to true and false when check box is checked. If you see where is the problem in my code please let me know. I have tried to make this function to work for any set of checkboxes. If you see any way to improve this I would like to hear that.

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

回答by indubitablee

add a simple ifelsestatement that checks if the checkbox is checked or not. if its checked, disable all other check boxes. if not checked, enable all check boxes

添加一个简单的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. the problem with your code is that the forloop is executing no matter what. so if you check something, it disables all unchecked, but if you uncheck something, the loops disables all checkboxes since all of them are now unchecked. thats why the ifstatement I added works. it differentiates if the checkbox is being checked or unchecked and then executes the desired functionality.

附：您的代码的问题在于，for无论如何循环都在执行。因此，如果您选中某些内容，它将禁用所有未选中的内容，但如果您取消选中某些内容，循环将禁用所有复选框，因为它们现在都未选中。这就是为什么if我添加的语句有效。它区分复选框是被选中还是未选中，然后执行所需的功能。

回答by Oen44

There you go, working as you want.

就这样，随心所欲地工作。

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>

回答by James

Same thing again, shorter code. Logically "the current checkbox should be enabled iff (the clicked checkbox is not checked) or (the current checkbox is the clicked checkbox)"

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

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>

回答by Rafael Kennedy

Another possible implementation:

另一种可能的实现：

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>

回答by May Dias

My implementation, i little dirty. I'll refactor later

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

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

 }