如何使用jQuery禁用/启用select字段?

I would like to create an option in a form like

我想以类似的形式创建一个选项

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

where selectbox is enabled only when checkbox is checked and disabled when not checked.

只有选中复选框时才启用selectbox，未选中时禁用selectbox。

I come up with this 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>

I tried various methods how to set disabled attribute using .prop(), .attr(), and .disabled=. However, nothing happens. When applying to a <input type="checkbox"> instead of <select>, the code works perfectly.

我尝试了各种方法，如何使用.prop()、.attr()和.disabled=设置禁用属性。然而,什么也不会发生。当应用于而不是时，代码运行得很好。

How to disable/enable <select> using jQuery?

如何使用jQuery禁用/启用 <选择> ?

8 个解决方案

#1

You would like to use code like this:

您希望使用如下代码:

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

​Here is working example

这是工作示例

#2

To be able to disable/enable selects first of all your selects need an ID or class. Then you could do something like this:

要禁用/启用select，首先需要一个ID或类。然后你可以这样做:

Disable:

禁用:

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

Enable:

启用:

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

#3

Disabled is a Boolean Attribute of the select element as stated by WHATWG, that means the RIGHT WAY TO DISABLE with jQuery would be

禁用是WHATWG所声明的select元素的布尔属性，这意味着禁用jQuery的正确方法是

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

This would make this HTML

这就是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>

This works for both XHTML and HTML (W3School reference)

这适用于XHTML和HTML (W3School reference)

Yet it also can be done using it as property

然而，它也可以作为财产来使用。

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

getting

得到

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

Which only works for HTML and not XTML

哪些只适用于HTML而不适用XTML

NOTE: A disabled element will not be submitted with the form as answered in this question: The disabled form element is not submitted

注意:禁用的元素将不会与此问题中回答的表单一起提交:禁用的表单元素没有提交

NOTE2: A disabled element may be greyed out.

注意2:禁用的元素可能会变为灰色。

NOTE3:

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>

#4

Just simply use:

仅仅使用:

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

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

DEMO ​

演示

#5

Use the following:

使用以下:

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

Or simply add id="pizza_kind" to <select> tag, like <select name="pizza_kind" id="pizza_kind">: jsfiddle link

或者简单地将id="pizza_kind"添加到标签，如: jsfiddle链接

The reason your code didn't work is simply because $("#pizza_kind") isn't selecting the <select> element because it does not have id="pizza_kind".

代码不能工作的原因仅仅是因为$(“#pizza_kind”)没有选择元素，因为它没有id=“pizza_kind”。

Edit: actually, a better selector is $("select[name='pizza_kind']"): jsfiddle link

编辑:实际上，更好的选择器是$(“select[name='pizza_kind']”):jsfiddle链接

#6

Your select doesn't have an ID, only a name. You'll need to modify your selector:

您的select没有ID，只有一个名称。您需要修改您的选择器:

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

Demo: http://jsbin.com/imokuj/2/edit

演示:http://jsbin.com/imokuj/2/edit

#7

sorry for answering in old thread but may my code helps other in future.i was in same scenario that when check box will be checked then few selected inputs fields will be enable other wise disabled.

很抱歉在旧的线程中回答，但希望我的代码将来能帮助别人。我在相同的场景中，当复选框被选中时，很少有选择的输入字段会被禁用。

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

#8

Good question - I think the only way to achieve this is to filter the items in the select.
You can do this through a jquery plugin. Check the following link, it describes how to achieve something similar to what you need. Thanks
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

好问题——我认为实现这一目标的唯一方法是过滤select中的项目。您可以通过jquery插件来实现这一点。检查下面的链接，它描述了如何实现类似您需要的东西。感谢jQuery禁用基于单选的选择选项(需要支持所有浏览器)