在選擇另一個按鈕時禁用單選按鈕

Question

從下面的示例。 有2個主要的單選按鈕（opt1和opt2）。 opt1具有3個子單選按鈕。 我需要做的是選擇opt1時什么也不會發生，但是選擇opt2時，應取消選中名為“ main_sub”的單選按鈕。 如何實現這一目標。

碼：

<div class="field">
                  <label>Radio button
                 </label>
                  <table width="60%" border="0" cellspacing="0" height="100%" cellpadding="0">
                    <tr>
                      <td><input type="radio" name="main"  id="main" value="Yes" />
                    Opt1 </td>
                    </tr>
                    <tr>
                      <td id="show"  style="padding-left:25px; width:200px; padding-top:5px;  line-height:20px;"><input type="radio" name="main_sub" id="main_sub" value=""  />
                        sub Opt1<br>
                        <input type="radio" name="main_sub"  id="main_sub" value=""  />
                        sub Opt2<br>
                        <input type="radio" name="main_sub"  id="main_sub" value=""  />
                        sub Opt2<br>
                      </td>
                    </tr>
                  </table>

                  <table align="center"  width="100%" border="0" cellspacing="0" height="100%" cellpadding="0">
                    <tr>
                      <td align="center" style="padding-right:60px;" ><input type="radio" name="main"  id="main" value="No" />
                        Opt2</td>
                    </tr>
                  </table>
                </div>

Answer 1

首先，ID必須是唯一的，因此將您的第二個主廣播ID更改為main2

之后，您可以執行此操作以實現所需的功能

document.getElementById("main2").addEventListener("change", function(){
    if (this.checked) {
        var subs_list = document.getElementsByName("main_sub");
        var subs = Array.prototype.slice.call(subs_list);
        console.log(subs);
        subs.forEach(function(sub){
            sub.checked = false;
        });
    }
});

小提琴

---

編輯

我想您可能想要相反的方式。 如果單擊子收音機，則應檢查main1是否已經選中，並且main2應該未選中。 為此，您也需要添加此代碼。

var subs_list_2 = document.getElementsByName("main_sub");
var subs_2 = Array.prototype.slice.call(subs_list_2);
subs_2.forEach(function(sub){
    sub.addEventListener("change", function(){
        if (this.checked) {
            document.getElementById("main2").checked = false;
            document.getElementById("main").checked = true;
        }
    });
});

更新場