Включение/выключение ввода на основе выбора (jQuery) 

<select name="state" class="select" id="state">
    <option value="something">Something</option>
    <option value="other">Other</option>
</select>

<input type="text" name="province" class="text" id="province" />

JQuery

$('#state').change(function () {
    if ($('#state Other:selected').text() == "Other"){
        $('#province').attr('disabled', false);
        alert(1);
    } else {
        alert(2);
    }
});

Кажется, не работает. Я должен делать что-то неправильно.

Ответы

Ответ 1

Вы должны использовать .removeAttr('disabled') вместо .attr('disabled', false). Также вы должны кэшировать селектора jQuery.

Изменить: Мысли об этом после этого факта. Вы можете "удалить" текст, который был введен в поле, если вы его отключили, поэтому я добавил .val(''), если вы также хотели скрыть его, вы можете добавить .hide() и .show() в два случая.

Я собрал эту скрипту, чтобы показать вам рабочую версию:

var $state = $('#state'), $province = $('#province');
$state.change(function () {
    if ($state.val() == 'other') {
        $province.removeAttr('disabled');
    } else {
        $province.attr('disabled', 'disabled').val('');
    }
}).trigger('change'); // added trigger to calculate initial state

.trigger('change') будет "запускать" событие изменения, эффективно запуская функцию один раз, когда вы ее связываете. Таким образом, #province будет либо отключен, либо включен в зависимости от состояния, выбранного во время запуска кода. Без него провинция была бы доступна, даже если государство не является "другим", если вы не добавили disabled='disabled' в тег <input> в свой html.

Ответ 2

Вам нужно установить "отключено" на true, чтобы фактически отключить что-то. Например, если вы хотите отключить "Другое" и включить все остальное, я предлагаю сказать:

$('#state').change(function () {
    $("#province").attr("disabled", $("#state").val() == "other");
});

В этом случае используется $("#province").val(), который обычно является предпочтительным способом получения текущего значения выбранного параметра из выпадающего списка в jQuery. Атрибут "disabled" установлен на true, если в противном случае это значение "other" и false.