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

Posted 2023-03-05

【中文标题】如果复选框选中禁用其他，如果未选中启用所有 JavaScript？

【英文标题】：If check box checked disable other, if unchecked enable all 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 个

我必须使用复选框元素，问题可能很愚蠢，但如果可能的话，我正在努力让它发挥作用。

如果我希望所有这些都被取消选中。

【参考方案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 上点击它一样

***.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;