Как задать enable/disable для input text при помощи радиобаттона?

Question

[smithana]

Добрый день.

застрял с простейшей с виду задачей.
Есть форма, в которой можно выбрать 1 вариант ответа. Последний радиобаттон (РБ) идёт с текстом "другое" и соответственно к нему привязан input text, в который можно вписать этот другой вариант.

Хочется сделать так, чтобы текст можно было вводить только если выбран РБ "другое".
Знаю, что можно это сделать с помощью css, например делать display none, или скрывать Input, а вместо него показывать похожий div.

Но хочется решить просто с помощью селекторов enable/disable и js.
С помощью on('change') я без проблем могу отследить когда чекается РБ и задать enable для Input text.
НО! почему-то on('change') не срабатывает, если я чекаю другой РБ.

Вот пример:
https://jsfiddle.net/2yv0cgpf/

Спасибо.

Answer 1

[Nik Gubin]

Вам нужно отслеживать изменения вообще всех этих кнопок. Внутри обработчика уже смотрите на значение выбранной кнопки $(this).val(), если 1 или 2, то поле заблокировано (prop disabled true), иначе разблокировано (prop disabled false). Если непонятно, то пришлю изменения уже. Пробуйте))

P.S. https://jsfiddle.net/2yv0cgpf/1/

Comments

[Stalker_RED]

Выбросил пару строк: https://jsfiddle.net/2yv0cgpf/3/

[Nik Gubin]

Stalker_RED: главное, чтобы ТС понял их. Я стараюсь минимум изменений вносить в чужой код при вопросах, чтобы они потом ещё 5 вопросов не строчили насчёт моих правок))

[smithana]

Хорошее решение, кроме одного но. Значения 1, 2 и 3 это в моей вёрстке, а какие значения поставит заказчик на рабочем варианте - не известно.
Поэтому хотелось найти более общее решение

[Nik Gubin]

smithana: тогда вот маленькое исправление в вариант от Stalker_RED: click

[Stalker_RED]

smithana: Можно также проверять наличие соседнего инпута, например $(this).siblings('input[type=text]').length
https://jsfiddle.net/2yv0cgpf/6/

Answer 2

[twobomb]

https://jsfiddle.net/twobomb/2yv0cgpf/2/

Comments

[smithana]

Как я и говорил - значения 1, 2 и 3 это в моей вёрстке, а какие значения поставит заказчик на рабочем варианте - не известно.
Поэтому хотелось найти более общее решение

[twobomb]

smithana: Ну откуда мне знать конечную структуру, там уже сам подделывай ну пока только еще так предложить.

Answer 3

[4X_Pro]

Можно обойтись без JavaScript: воспользоваться псевдоклассом :checked и возможностью указывать следующий тег через +,
То есть если имеем код

<input type=checkbox id="other" value="other" /><label for="other">Другое</label>
<div><input type="text" name="other_value"/></div>

то можно прописать такой CSS:

#other+label+div { display: none }
#other:checked+label+div { display: block }

Comments

[smithana]

да, знаю. Но как и говорил, хотелось понять, почему on change работает только для состояния enable и как решить эту проблему.