How to trace a radio button change?

Question

I try to delete attribute "disabled" in my input area or if I choose another radio button, will add "disabled" in my input. This code doesn't right work:

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>

score 0 · Answer 1 · edited Jul 05 '18 at 09:57

The change listener is only on radio_1 (or, the #radio_3 input) - the listener runs when the radio button is selected, but not when some other radio button is selected. Add a listener to each radio button instead:

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>

mplungjan · Accepted Answer · 2018-07-05T09:59:53.627

You need to add the event handler to each button and I choose to use .disabled instead of setAttribute which works poorly with disabled. I removed the attribute from the input field and set it in code

NOTE: This code also will set the disabled depending on which button is checked at load time

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>

score -1 · Answer 3 · answered Jul 05 '18 at 09:46

The change event doesn't trigger when you click on radio 1 and 2. So you would need to register event handlers separately for them.

In the snippet below, I have declared the event handler separately, and bound it to the radio buttons through separate calls to 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>

There are ways to simplify the event registration part, such as listening for events on a containing element, and react accordingly. But I have tried to keep it simpler in the snippet above. You can read the following question about event bubbling if you're interested in such an approach: What is event bubbling and capturing?

How to trace a radio button change?

3 Answers3