Как правильно вешать обработчики на изменение input radio?

Question

[its2easyy]

Есть форма, в которой находятся два input radio и неактивный текстовый input

<form name="form1" id="form1">
   ...
   <label><input type="radio" name="radio1" value="0" checked/>Нет</label>
   <label><input type="radio" name="radio1" value="1"/>Да</label>
  
   <input type="text" value="100" name="input1"  disabled/>
   ...
</form>

Нужно чтобы при переключении radio текстовое поле становилось доступным, а при переключении обратно снова отключалось. Нажатия на label тоже должно срабатывать.
Нужно использовать событие click или change? И можно ли повесить обработчик на массив radio не используя цикла?
Желательно чтобы было на нативном js.

Answer 1

[Виталий Инчин ☢]

form1.onchange = function(e){
      if(e.target.name == "radio1"){
         this.elements.input1.disabled = !+e.target.value;
      }
}

jsfiddle.net/8pxxh4ux

Примерно то же на jQuery:

$("#form1").on("change", "input[name=radio1]", function(){
    var $this = $(this);
    $this.next("input[name=input1]").prop("disabled", !+$this.val());
    //this.form.elements.input1.disabled = !+this.value;
});

Answer 2

[Алексей Уколов]

Нужно использовать событие click или change?

Change - изменить значение можно и без клика.

И можно ли повесить обработчик на массив radio не используя цикла?

Только если использовать jquery (и то, внутри цикл всё равно будет).

Answer 3

[lnked]

$('input[type="radio"]').on('change', function(e){
 //состояние $(this).prop('checked');
});