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

问题描述：

我有一组复选框按钮，如果我点击并选中一个，我希望其他复选框被设置为禁用。此外，如果我点击相同，并取消选中我希望所有人都启用。我的逻辑工作，如果我检查复选框，但如果我再次点击所有这些都被禁用。这里是我的代码：如果复选框选中禁用其他，如果未选中启用所有JavaScript？

<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。如果您看到我的代码中存在问题，请告诉我。我试图让这个功能适用于任何一组复选框。如果你看到任何改善这种情况的方法，我希望听到。

有你的arent使用单选按钮的具体原因具有明确的功能？ – indubitablee

愚蠢的问题。你可以使用单选按钮吗？如果他们具有相同的名称属性，则不能选择多于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你可以使用相同的功能。您可以根据数据库中的数据加载页面后触发点击 – indubitablee

但我会将该值传递给我的函数，这与现在函数的工作方式不同。我试过了，但没有奏效。这是我曾尝试过的：ckChange（' #Trim（myData。进展）＃'）; –

答

你走了，按你的意愿工作。

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>

答

另一种可能的实现：

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>

答

同一件事情，更短的代码。从逻辑上讲，“目前复选框应启用IFF（点击的复选框没有被选中）或（目前的复选框被点击复选框）”

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>

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

相关推荐