Как отключить/включить поле выбора с помощью jQuery?

Я хотел бы создать опцию в форме, например

[] I would like to order a [selectbox with pizza] pizza

где selectbox включен только тогда, когда флажок установлен и отключен, если не установлен.

Я придумал этот код:

<form>
<input type="checkbox" id="pizza" name="pizza" value="yes"> <label for="pizza">
I would like to order a</label>
<select name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
</select>
pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script>
var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $("#pizza_kind").removeAttr("disabled");
    }
    else {
        $("#pizza_kind").prop('disabled', 'disabled');
    }
};

$(update_pizza);
$("#pizza").change(update_pizza);
</script>

Я пробовал различные методы, чтобы установить отключенный атрибут с помощью .prop(), .attr() и .disabled=. Однако ничего не происходит. При применении к <input type="checkbox"> вместо <select> код работает отлично.

Как отключить/включить <select> с помощью jQuery?

Ответы

Ответ 1

Вы хотели бы использовать такой код:

<form>
  <input type="checkbox" id="pizza" name="pizza" value="yes">
  <label for="pizza">I would like to order a</label>
  <select id="pizza_kind" name="pizza_kind">
    <option>(choose one)</option>
    <option value="margaritha">Margaritha</option>
    <option value="hawai">Hawai</option>
  </select>
  pizza.
</form>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
  var update_pizza = function () {
    if ($("#pizza").is(":checked")) {
        $('#pizza_kind').prop('disabled', false);
    }
    else {
        $('#pizza_kind').prop('disabled', 'disabled');
    }
  };
  $(update_pizza);
  $("#pizza").change(update_pizza);
</script>

Здесь работает пример

Ответ 2

Чтобы иметь возможность отключить/включить выбор, прежде всего вашим выборам нужен идентификатор или класс. Тогда вы можете сделать что-то вроде этого:

Отключить:

$('#id').attr('disabled', 'disabled');

Включить:

$('#id').removeAttr('disabled');

Ответ 3

Disabled является логическим атрибутом элемента select, как указано в WHATWG, это означает, что ПРАВИЛЬНЫЙ СПОСОБ ОТКЛЮЧИТЬ с jQuery будет

jQuery("#selectId").attr('disabled',true);

Это сделало бы этот HTML

<select id="selectId" name="gender" disabled="disabled">
    <option value="-1">--Select a Gender--</option>
    <option value="0">Male</option>
    <option value="1">Female</option>
</select>

Это работает как для XHTML, так и для HTML (ссылка на W3School)

Тем не менее, это также может быть сделано, используя его как свойство

jQuery("#selectId").prop('disabled', 'disabled');

получение

<select id="selectId" name="gender" disabled>

Который работает только для HTML, а не XTML

ПРИМЕЧАНИЕ. Отключенный элемент не будет отправлен с формой, на которую дан ответ в этом вопросе: Отключенный элемент формы не отправлен.

ПРИМЕЧАНИЕ 2. Отключенный элемент может быть серым.

ЗАМЕТКА 3:

Отключенный элемент управления формы должен предотвращать отправку на элемент любых событий щелчка, находящихся в очереди в источнике задачи взаимодействия с пользователем.

TL; DR

<script>
    var update_pizza = function () {
        if ($("#pizza").is(":checked")) {
            $('#pizza_kind').attr('disabled', false);
        } else {
            $('#pizza_kind').attr('disabled', true);
        }
    };
    $(update_pizza);
    $("#pizza").change(update_pizza);
</script>

Ответ 4

Просто используйте:

var update_pizza = function () {
     $("#pizza_kind").prop("disabled", !$('#pizza').prop('checked'));
};

update_pizza();
$("#pizza").change(update_pizza);

DEMO

Ответ 5

Используйте следующее:

$("select").attr("disabled", "disabled");

Или просто добавьте тег id="pizza_kind" в <select>, например <select name="pizza_kind" id="pizza_kind">: ссылка jsfiddle

Причина, по которой ваш код не работал, просто потому, что $("#pizza_kind") не выбирает элемент <select>, потому что он не имеет id="pizza_kind".

Изменить: на самом деле лучший селектор $("select[name='pizza_kind']"): ссылка jsfiddle

Ответ 6

Ваш select не имеет идентификатора, а только имя. Вам нужно будет изменить свой селектор:

$("#pizza").on("click", function(){
  $("select[name='pizza_kind']").prop("disabled", !this.checked);
});

Демо: http://jsbin.com/imokuj/2/edit

Ответ 7

извините за ответ в старом потоке, но мой код поможет другим в будущем. я был в том же сценарии, что при установке флажка будет отмечено несколько выбранных полей ввода, которые будут отключены.

$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});

Ответ 8

Хороший вопрос - я думаю, что единственный способ добиться этого - отфильтровать элементы в элементе.
Вы можете сделать это через плагин jquery. Проверьте следующую ссылку, в которой описано, как добиться чего-то похожего на то, что вам нужно. Благодаря
jQuery отключить параметры SELECT на основе выбранного радио (нужна поддержка для всех браузеров)