如何跟蹤單選按鈕的更改？

Question

我嘗試在輸入區域中刪除屬性“ disabled”，或者如果我選擇另一個單選按鈕，則會在輸入中添加“ disabled”。 此代碼無法正常工作：

 var radio_3 = document.getElementById("Radio3"); var input_long = document.getElementById("inputLong"); radio_3.addEventListener("change", function() { if (radio_3.checked) { input_long.removeAttribute("disabled"); } else { input_long.setAttribute("disabled"); } }) 

 <div class="form-group col-md-6"> <label for="inputLong">Предпочтительная для Вас длительность конференции?</label> <div class="custom-control custom-radio"> <input type="radio" id="Radio1" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio1">1 день</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="Radio2" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio2">2 дня</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="Radio3" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio3">Другое</label> </div> <input type="text" class="form-control mt-1" id="inputLong" placeholder="" disabled> </div> 

Answer 1

的change聽者只在radio_1 （或，在#radio_3 input ） -收聽當無線電按鈕被選擇運行，但不是當選擇一些其它的單選按鈕。 而是將監聽器添加到每個單選按鈕：

 var input_long = document.getElementById("inputLong"); const listener = (e) => { input_long.disabled = e.target.id === 'Radio3' ? false : true; }; document.querySelectorAll('input[name="how_long"]').forEach(input => { input.addEventListener("change", listener); }); 

 <div class="form-group col-md-6"> <label for="inputLong">Предпочтительная для Вас длительность конференции?</label> <div class="custom-control custom-radio"> <input type="radio" id="Radio1" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio1">1 день</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="Radio2" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio2">2 дня</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="Radio3" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio3">Другое</label> </div> <input type="text" class="form-control mt-1" id="inputLong" placeholder="" disabled> </div> 

Answer 2

您需要將事件處理程序添加到每個按鈕，並且我選擇使用.disabled而不是setAttribute，而setAttribute在禁用時效果不佳。 我從輸入字段中刪除了該屬性，並在代碼中進行了設置

注意：此代碼還將根據加載時選中哪個按鈕來設置禁用狀態

 var rads = document.querySelectorAll("[name=how_long]"); for (var i=0;i<rads.length;i++) { rads[i].onclick=function() { document.getElementById("inputLong").disabled=this.id!="Radio3"; } } document.getElementById("inputLong").disabled=!document.getElementById("Radio3").checked; 

 <div class="form-group col-md-6"> <label for="inputLong">Предпочтительная для Вас длительность конференции?</label> <div class="custom-control custom-radio"> <input type="radio" id="Radio1" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio1">1 день</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="Radio2" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio2">2 дня</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="Radio3" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio3">Другое</label> </div> <input type="text" class="form-control mt-1" id="inputLong" placeholder=""> </div> 

Answer 3

單擊廣播1和2時不會觸發change事件。因此，您需要分別為其注冊事件處理程序。

在下面的代碼段中，我分別聲明了事件處理程序，並通過對addEventListener單獨調用將其綁定到單選按鈕。

 var radio_1 = document.getElementById("Radio1"); var radio_2 = document.getElementById("Radio2"); var radio_3 = document.getElementById("Radio3"); var input_long = document.getElementById("inputLong"); var eventHandler = function() { if (radio_3.checked) { input_long.removeAttribute("disabled"); } else { input_long.setAttribute("disabled", "disabled"); } }; radio_1.addEventListener("change", eventHandler); radio_2.addEventListener("change", eventHandler); radio_3.addEventListener("change", eventHandler); 

 <div class="form-group col-md-6"> <label for="inputLong">Предпочтительная для Вас длительность конференции?</label> <div class="custom-control custom-radio"> <input type="radio" id="Radio1" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio1">1 день</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="Radio2" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio2">2 дня</label> </div> <div class="custom-control custom-radio"> <input type="radio" id="Radio3" name="how_long" class="custom-control-input"> <label class="custom-control-label" for="Radio3">Другое</label> </div> <input type="text" class="form-control mt-1" id="inputLong" placeholder="" disabled> </div> 

---

有一些方法可以簡化事件注冊部分，例如偵聽包含元素上的事件，並做出相應的反應。 但我嘗試在上面的代碼段中使其更簡單。 如果您對事件冒泡感興趣，可以閱讀以下有關事件冒泡的問題： 什么是事件冒泡和捕獲？