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）上-侦听器在选中单选按钮时运行，但不是< / em>，如果选择了某些 other 单选按钮。而是将监听器添加到每个单选按钮：

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>

有一些方法可以简化事件注册部分，例如侦听包含元素上的事件，并做出相应的反应。但我尝试在上面的代码段中使其更简单。如果您对事件冒泡感兴趣，可以阅读以下问题：What is event bubbling and capturing?

如何跟踪单选按钮的更改？

3 个答案: