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

155

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

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

привет, этот подход работает на IE 10? не знаю, как включить поле выбора в IE 10. ROROROOROROR

Ваш Ответ

8   ответов
5

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

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

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

7

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

17

логический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>
105

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

Disable:

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

Enable:

$('#id').removeAttr('disabled');
& quot; Метод .prop () следует использовать для установки отключенного и отмеченного вместо метода .attr () & quot; источник:api.jquery.com/prop
это должен быть выбранный ответ .. намного лучше для скимминга :)
@Blackstackoverflow.com/a/10570155/150342
@ Колин, оба работают, поэтому я не вижу проблемы.
5

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

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

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

14

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

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

DEMO     & # X200B;

259

<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; Здесь работаетпример

Что такое $ (update_pizza); делать? Оборачивание функции в объект jquery?
для jQuery 3 это должно быть "$ (" # pizza_kind "). prop (" отключено ", true / false);" насколько я знаю
$('#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.

Похожие вопросы