選中第二個復選框時如何禁用復選框？

Question

我有一個表單，它有 2 個復選框和一個文本輸入。

如果我選擇第一個復選框，那么第二個復選框應該被禁用，如果我選擇第二個復選框，那么第一個復選框應該被禁用。

換句話說，一次只能選中一個復選框。

我正在做的任務要求我使用復選框（而不是單選按鈕），所以我嘗試了以下解決方案：

 function sub() { var text = document.getElementById("text"); var ret = true; if (text == null) { document.getElementById("txtErr").innerHTML = "please enter a text"; ret = false; } else document.getElementById("txtErr").innerHTML = ""; return ret; } function enable() { var giga = document.getElementById("gigamonenable"); var m2k = document.getElementById("m2000enable"); if (giga.checked == true || m2k.checked == true) { if (giga.checked == true) { document.getElementById("m2000enable").disabled = true; document.getElementById("gigamonenable").disabled = false; } else if (m2k.checked == true) { document.getElementById("gigamonenable").disabled = true; document.getElementById("m2000enable").disabled = false; } }

 <form action="abc.html" onsubmit="return sub()"> <input type="checkbox" id="gigamonenable" name="gigamonenable" onchange="enable()" /> Gigamon port Enable <br> <input type="checkbox" id="m2000enable" name="m2000enable" onchange="enable()" /> M2000 port Enable <br> <input type="text" id="text" /><span id="txtErr" class="error"></span> <input type="submit" id="submit" /><br> <br> </form>

Answer 1

 function enable() { var giga = document.getElementById("gigamonenable"); var m2k = document.getElementById("m2000enable"); if (giga.checked == true) { m2k.checked = false; m2k.disabled = true; } else if (m2k.checked == true) { giga.checked = false; giga.disabled = true; } else { m2k.disabled = false; giga.disabled = false; } }

 <form action="abc.html" onsubmit="return sub()"> <input type="checkbox" id="gigamonenable" name="gigamonenable" onchange="enable()" /> Gigamon port Enable <br> <input type="checkbox" id="m2000enable" name="m2000enable" onchange="enable()" /> M2000 port Enable <br> <input type="text" id="text" /><span id="txtErr" class="error"></span> <input type="submit" id="submit" /><br> <br> </form>