@its2easyy

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

Есть форма, в которой находятся два 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.
  • Вопрос задан
  • 6335 просмотров
Решения вопроса 1
In4in
@In4in
°•× JavaScript Developer ^_^ ו°
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;
});
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
alexey-m-ukolov
@alexey-m-ukolov Куратор тега JavaScript
Нужно использовать событие click или change?

Change - изменить значение можно и без клика.
И можно ли повесить обработчик на массив radio не используя цикла?
Только если использовать jquery (и то, внутри цикл всё равно будет).
Ответ написан
Комментировать
@lnked
$('input[type="radio"]').on('change', function(e){
 //состояние $(this).prop('checked');
});
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы