HTML如果选中一个复选框，则其他复选框不能

如果我勾选“以上无一项”，则其他项无法勾选。但在我的复选框中，它可以。有办法解决这个问题吗

<table>
<tr>
<td width="100px">1. Cough</td><td width="80px"><input type="hidden" name="cough" value="no"><input type="checkbox" class="form-control" name="cough" value="yes"></td>
</tr>
<tr>
<td width="100px">2. Sore Throat</td><td width="80px"><input type="hidden" name="sore_throat" value="no"><input type="checkbox" class="form-control" name="sore_throat" value="yes"></td>
</tr>
<tr>
<td width="100px">3. Fever</td><td width="80px"><input type="hidden" name="fever" value="no"><input type="checkbox" class="form-control" name="fever" value="yes"></td>
</tr>
<tr>
<td width="100px">4. Flu</td><td width="80px"><input type="hidden" name="flu" value="no"><input type="checkbox" class="form-control" name="flu" value="yes"></td>
<tr>
<td width="230px">5. None of above</td><td width="80px"><input type="hidden" name="none" value="no"><input type="checkbox" class="form-control" name="none" value="yes"></td>
</tr>
</table>

1.咳嗽
2.喉咙痛
3.发烧
4.流感
5.以上都没有

纯CSS解决方案：

• 将id=添加到控制复选框
• 将class=dohidepotentially添加到受控表行
• 添加css样式：

  #none:checked+table.dohidepotentialy{display:none}

唯一的缺点是控制复选框必须放在表之前（对于css选择器）。但它是可以隐藏的

缩略示例：

<form>
    <input type="checkbox" class="form-control" name="none" value="yes" id="none">
    <table>
        <tr class="dohidepotentially">
            <td width="100px">2. Sore Throat</td><td width="80px"><input type="hidden" name="sakit_tekak" value="no"><input type="checkbox" class="form-control" name="sore_throat" value="yes"></td>
        </tr>
        <tr>
            <td width="100px">3. Fever</td><td width="80px"><input type="hidden" name="fever" value="no"><input type="checkbox" class="form-control" name="fever" value="yes"></td>
        </tr>
        <tr>
            <td width="230px">5. None of above</td><td width="80px"><input type="hidden" name="none" value="tiada"><label for="none">[click here]</label></td>
        </tr>
    </table>
</form>

2.喉咙痛
3.发烧
5.以上都没有[单击此处]

HTML

JS

var复选框=document.getElementById（“疾病”）.getElementsByTagName（“输入”）；
变量名称=[“咳嗽”、“喉咙痛”、“发烧”、“流感”]；
复选框.namedItem（“无”）.addEventListener（“更改”，函数（e）{
if（this.checked==true）{
对于（var i=0；i您可以使用
querySelectorAll
查找一组非键复选框（
none
）的复选框，对于每个复选框，根据键复选框的状态禁用/启用它，如下所示：


document.addEventListener（'DOMContentLoaded'，e=>{
document.querySelector（'input[type=“checkbox”][name=“none”]'））.addEventListener（'click'，函数（e）{//查找所有非关键复选框的复选框
让col=document.querySelectorAll（'input[type=“checkbox”]：not（[name=“none”]）；
col.forEach（chk=>{//遍历集合
chk.disabled=this.checked；//如果选中了键，则禁用当前复选框；如果未选中，则启用当前复选框
如果（this.checked）chk.checked=false；//如果选中了key复选框，则无法选中所有其他复选框
});
});
})；

1.咳嗽
2.喉咙痛
3.发烧
4.流感
5.以上都没有
更详细地解释您的问题您的意思是，如果勾选了“以上无一项”，则应禁用其他复选框？@Vishal是。.如果取消勾选“以上无一项”，则可以选中其他复选框。关于命名：我会将“无”重命名为更具发言权的id，可能是“无疾病”。为什么不使用单选按钮？它们就是为了这样设计的！您也可以只隐藏复选框，而不隐藏行：
#none:checked+table.dohidepotentially input{display:none；}
事实上，我在下面有另一个复选框，它在另一个div中也禁用了其他复选框。如何启用其他复选框？修改
querySelectorAll
中使用的表达式以包括表：即：
let col=document.queryselectoral（
let col=document.queryselectoral（'table input[type=“checkbox”]：not（[name=“none”]））；
如果
“other”
复选框也在它们自己的表中，那么您需要进一步澄清查询表达式的范围-如果没有看到完整的代码，就有点难说了definitively@Amirul如果解决了您的问题，请将此作为正确答案：|
<table id="sickness">

var checkboxes = document.getElementById("sickness").getElementsByTagName("input");

var names = ["cough", "sore_throat", "fever","flu"]; 

checkboxes.namedItem("none").addEventListener("change", function(e){
     if(this.checked == true){
         for(var i=0;i<names.length;i++){
             checkboxes.namedItem(names[i]).disabled = true;
         }
     }else{
         for(var i=0;i<names.length;i++){
             checkboxes.namedItem(names[i]).disabled = false;
         }
     }
});