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

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

<code>[] I would like to order a [selectbox with pizza] pizza
</code>

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

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

<code><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>
</code>

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

Как отключить / включить<select> используя jQuery?

 ROROROOROROR26 авг. 2014 г., 11:59
привет, этот подход работает на IE 10? не знаю, как включить поле выбора в IE 10.

Ответы на вопрос(8)

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

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

Демо-версия:http://jsbin.com/imokuj/2/edit

$("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

логическийAttribute извыбрать элемент как указаноWHATWGэто означает, чтоRIGHT WAY TO DISABLE с 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

NOTE: Отключенный элемент не будет отправлен с формой, на которую дан ответ в этом вопросе:Отключенный элемент формы не отправлен

NOTE2: Отключенный элемент может быть серым.

NOTE3:

A form control that is disabled must prevent any click events that are queued on the user interaction task source from being dispatched on the element.

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>

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

Disable:

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

Enable:

$('#id').removeAttr('disabled');
 05 дек. 2018 г., 13:13
 04 дек. 2018 г., 12:25
@ Колин, оба работают, поэтому я не вижу проблемы.
 17 сент. 2013 г., 13:40
& quot; Метод .prop () следует использовать для установки отключенного и отмеченного вместо метода .attr () & quot; источник:api.jquery.com/prop
 27 февр. 2019 г., 18:00
это должен быть выбранный ответ .. намного лучше для скимминга :)

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

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

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

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

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

DEMO     & # X200B;

Решение Вопроса

<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>

& # x200B; Здесь работаетпример

 03 окт. 2013 г., 11:11
$('#pizza_kind').prop('disabled', false); а также$('#pizza_kind').prop('disabled', true);, КакjQuery's documentation says: Properties generally affect the dynamic state of a DOM element without changing the serialized HTML attribute. Examples include the value property of input elements, the disabled property of inputs and buttons, or the checked property of a checkbox. The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value.
 18 июл. 2017 г., 03:49
Что такое $ (update_pizza); делать? Оборачивание функции в объект jquery?
 24 мая 2017 г., 17:48
для jQuery 3 это должно быть "$ (" # pizza_kind "). prop (" отключено ", true / false);" насколько я знаю

Ваш ответ на вопрос