如何使用jQuery禁用/启用select字段？
我想创build一个类似的forms的选项
[] I would like to order a [selectbox with pizza] pizza 其中select框仅在checkbox被选中时被启用，而不被选中时被选中。
我拿出这个代码：
<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()和.disabled=来设置禁用属性的各种方法。 但是，没有任何反应。 当应用到<input type="checkbox">而不是<select> ，代码完美地工作。
如何使用jQuery禁用/启用<select> ？
你想使用这样的代码：
<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>
这是工作的例子
为了能够禁用/启用，首先select需要一个ID或类。 那么你可以做这样的事情：
禁用：
$('#id').attr('disabled', 'disabled');
启用：
$('#id').removeAttr('disabled');
只是简单地使用：
var update_pizza = function () { $("#pizza_kind").prop("disabled", !$('#pizza').prop('checked')); }; update_pizza(); $("#pizza").change(update_pizza);
DEMO
Disabled是WHATWG声明的select元素的布尔属性 ，这意味着用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
注意：禁用的元素将不会像在此问题中一样被提交表单： 禁用的表单元素不会被提交
注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>
使用以下内容：
$("select").attr("disabled", "disabled");
或者简单地将id="pizza_kind"添加到<select>标签，就像<select name="pizza_kind" id="pizza_kind"> ： jsfiddle链接
你的代码不工作的原因是因为$("#pizza_kind")没有select<select>元素，因为它没有id="pizza_kind" 。
编辑：实际上，更好的select器是$("select[name='pizza_kind']") ： jsfiddle链接
您的select没有ID，只有一个名字。 你需要修改你的select器：
$("#pizza").on("click", function(){ $("select[name='pizza_kind']").prop("disabled", !this.checked); });
演示： http : //jsbin.com/imokuj/2/edit
对不起，在旧的线程回答，但可能我的代码在未来帮助其他。我是在相同的情况下，当checkbox将被检查，然后几个选定的input字段将启用其他明智的禁用。
$("[id*='chkAddressChange']").click(function () { var checked = $(this).is(':checked'); if (checked) { $('.DisabledInputs').removeAttr('disabled'); } else { $('.DisabledInputs').attr('disabled', 'disabled'); } });
好问题 – 我认为实现这一目标的唯一方法是过滤select中的项目。
你可以通过一个jQuery插件来做到这一点。 检查下面的链接，它描述了如何实现类似于你所需要的东西。 谢谢
jQuery禁用select基于select的选项（需要支持所有浏览器）
