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

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

Answer 1

添加一个简单的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语句有效。如果选中或取消选中复选框，它会区分，然后执行所需的功能。

Answer 2

同样的事情，更短的代码。逻辑上＆＃34;当前复选框应该启用iff（未选中单击的复选框）或（当前复选框是单击的复选框）＆＃34;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

你去，按你的意愿工作。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

 }

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

5 个答案: