如何使用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>

我想订一个
（选择一个）
玛格丽塔
夏威夷
披萨
var update_pizza=函数（）{
如果（$（“#比萨饼”）是（“：选中”））{
美元（“#比萨类”）。移除（“禁用”）；
}
否则{
$（“#比萨饼类”）.prop（'disabled'、'disabled'）；
}
};
$（最新信息）；
$（“#比萨饼”）。更改（更新#比萨饼）；

我尝试了各种方法来设置禁用属性，包括使用

.prop（）

、

.attr（）

和

.disabled=

。然而，什么也没有发生。当应用于

而不是

时，代码工作正常

---

如何使用jQuery禁用/启用

？

好问题-我认为实现这一点的唯一方法是过滤select中的项目
您可以通过jquery插件来实现这一点。检查下面的链接，它描述了如何实现类似于您需要的东西。谢谢
使用以下方法：

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

或者只需将

id=“pizza\u kind”

添加到

标记中，如

：

代码不起作用的原因很简单，因为

$（“#pizza_kind”）

没有选择

元素，因为它没有

id=“pizza_kind”

---

编辑：实际上，更好的选择器是

$（“选择[name='pizza_kind']”）

：

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

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

禁用：

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

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

启用：

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

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

只要简单地使用：

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

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

---

​

您希望使用如下代码：

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

我想订一个
（选择一个）
玛格丽塔
夏威夷
披萨
var update_pizza=函数（）{
如果（$（“#比萨饼”）是（“：选中”））{
$（'pizza'u kind'）.prop（'disabled'，false）；
}
否则{
$（'pizza'u kind'）。道具（'disabled'，'disabled'）；
}
};
$（最新信息）；
$（“#比萨饼”）。更改（更新#比萨饼）；

---

​这里正在工作

您的

选择

没有ID，只有名称。您需要修改选择器：

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

---

演示：

很抱歉在旧线程中回答，但我的代码可能会在将来帮助其他人。我的情况与选中复选框时的情况相同，只有少数选定的输入字段将被启用或禁用

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

Disabled是一种，如所述，这意味着使用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>

得到

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

它只适用于HTML，不适用于XTML

注意：禁用元素不会与此问题中所回答的表格一起提交：

注2:禁用的元素可能会灰显

注3:

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

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

禁用的表单控件必须防止在用户交互任务源上排队的任何单击事件在元素上调度

TL；DR

var update_pizza=函数（）{
如果（$（“#比萨饼”）是（“：选中”））{
$（'pizza'u kind'）.attr（'disabled'，false）；
}否则{
$（'pizza'u kind'）.attr（'disabled'，true）；
}
};
$（最新信息）；
$（“#比萨饼”）。更改（更新#比萨饼）；

“应该使用.prop（）方法来设置禁用和选中，而不是.attr（）方法”来源：这应该是所选答案。。略读更好：）这不应该是答案。

。removeAttr（）

不再将属性设置为false

$（'pizza'u kind'）。prop（'disabled'，false）

和

$（'pizza'u kind'）.prop（'disabled'，true）。As：属性通常会影响DOM元素的动态状态，而不会更改序列化的HTML属性。示例包括输入元素的值属性、输入和按钮的禁用属性或复选框的选中属性。应使用.prop（）方法来设置禁用和选中，而不是.attr（）方法。.val（）方法应该用于获取和设置值。对于jQuery 3，它应该是“$”（“#pizza_kind”）.prop（'disabled'，true/false）；”据我所知，什么是$（update_pizza）；做什么？将函数包装到jquery对象中？您好，这种方法在IE 10上有效吗？不知道如何在IE 10中启用选择字段。