Как отключить / включить поле выбора с помощью 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?

559   8  

8 ответов:

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

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

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

239  
2012-05-13 11:15:45

чтобы иметь возможность отключить/включить выбирает в первую очередь свой выбор нужно ID или класс. Затем вы могли бы сделать что-то вроде этого:

отключить:

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

включить:

$('#id').removeAttr('disabled');
98  
2014-11-10 20:37:36

Disabled - это Boolean атрибут на выберите элемент как заявил 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 reference)

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

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>
17  
2017-05-23 14:47:15

просто использовать:

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

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

демо ​

14  
2012-05-13 10:56:53

использовать следующий:

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

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

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

Edit: на самом деле, лучший селектор -$("select[name='pizza_kind']"):jsfiddle link

7  
2012-05-13 10:53:58

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

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

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

5  
2012-05-13 10:56:29

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

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

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

2  
2017-05-23 15:03:05

Comments

    Ничего не найдено.
Click here to cancel reply.