如何使用 jQuery 禁用/启用选择字段？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10570070/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to disable/enable select field using jQuery?
提问by izidor
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.
其中选择框仅在选中复选框时启用，未选中时禁用。
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=。然而，什么也没有发生。当应用于<input type="checkbox">代替 时<select>，代码完美运行。
How to disable/enable <select>using jQuery?
如何<select>使用 jQuery禁用/启用？
回答by Community Driven Business
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
?这是工作示例
回答by Obsivus
To be able to disable/enable selects first of all your selects need an ID or class. Then you could do something like this:
为了能够禁用/启用选择，首先您的选择需要一个 ID 或类。然后你可以做这样的事情：
Disable:
禁用：
$('#id').attr('disabled', 'disabled');
Enable:
使能够：
$('#id').removeAttr('disabled');
回答by Azteca
Disabled is a Boolean Attributeof the select elementas stated by WHATWG, that means the RIGHT WAY TO DISABLEwith jQuery would be
残疾人是一个布尔属性的的选择元件如指出WHATWG，该装置的正确的方式DISABLE与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)
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:
注3：
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
TL; 博士
<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>
回答by The System Restart
回答by K Z
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"到<select>标签，例如<select name="pizza_kind" id="pizza_kind">：jsfiddle link
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")没有选择<select>元素，因为它没有id="pizza_kind".
Edit: actually, a better selector is $("select[name='pizza_kind']"): jsfiddle link
编辑：实际上，更好的选择器是$("select[name='pizza_kind']")：jsfiddle 链接
回答by Sampson
Your selectdoesn't have an ID, only a name. You'll need to modify your selector:
你select没有身，只有名字。您需要修改选择器：
$("#pizza").on("click", function(){
$("select[name='pizza_kind']").prop("disabled", !this.checked);
});
回答by Mou
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');
}
});
回答by Joseph Caruana
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)
好问题 - 我认为实现这一目标的唯一方法是过滤选择中的项目。
您可以通过 jquery 插件来做到这一点。检查以下链接，它描述了如何实现与您需要的类似的东西。感谢
jQuery 根据选中的 Radio 禁用 SELECT 选项（需要支持所有浏览器）
