logo标签列表

如何使用jQuery禁用/启用选择字段？

jqueryhtmlforms
204

我想在表单中创建一个选项，类似于

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

当复选框被选中时，选择框才可用，未选中时则禁用。

我想到了这段代码：

<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= 等方法设置 <select> 元素的禁用属性，但是没有效果。当应用在 <input type="checkbox"> 元素而不是 <select> 元素时，代码可以完美地工作。

如何使用 jQuery 禁用/启用 <select> 元素？

你好，这种方法在IE 10上可行吗？不知道如何在IE 10中启用选择字段。 - ROROROOROROR
9个回答
340

您想使用这样的代码：

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

这里有一个可用的示例

41
根据 jQuery 的文档，$('#pizza_kind').prop('disabled', false); 表示启用 pizza 种类下拉菜单，而 $('#pizza_kind').prop('disabled', true); 表示禁用该下拉菜单。属性通常会影响 DOM 元素的动态状态，而不改变序列化的 HTML 属性。例如，input 元素的 value 属性、输入和按钮的 disabled 属性或复选框的 checked 属性。应使用 .prop() 方法来设置 disabled 和 checked，而不是 .attr() 方法。使用 .val() 方法来获取和设置值。 - naor
4
据我所知，对于jQuery 3，应该使用“$('#pizza_kind').prop('disabled', true/false);”来禁用/启用元素。 - Gennady G
4
$(update_pizza);在做什么？是将函数封装在jQuery对象中吗？ - Edward
138
要能够禁用/启用选择器，首先你的选择器需要有一个ID或类。然后你可以像这样做：
禁用：
$('#id').attr('disabled', 'disabled');

启用：

$('#id').removeAttr('disabled');
9
应该使用.prop()方法来设置禁用(disabled)和选中(checked)，而不是使用.attr()方法。来源：http://api.jquery.com/prop/ - Colin
3
这应该是被选中的答案...更适合快速浏览 :) - quemeful
1
.removeAttr()不再将属性设置为false。请参考https://jquery.com/upgrade-guide/3.0/#breaking-change-removeattr-no-longer-sets-properties-to-false和https://dev59.com/g2Yr5IYBdhLWcg3wfaWd#13626565。 - Mark Schultheiss
31

根据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参考），并且也可以将其作为属性来完成。
jQuery("#selectId").prop('disabled', 'disabled');

获取

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

这仅适用于HTML而不是XTML。

注意：禁用的元素将不会随表单一起提交，如此问题中所回答的：禁用的表单元素不会被提交。

注意2：禁用的元素可能会变灰。

注意3：

禁用的表单控件必须防止在用户交互任务源上排队的任何单击事件被分派到该元素上。

简而言之

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

只需简单使用：

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

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

演示

10

请使用以下方法：

$("select").attr("disabled", "disabled");
或者只需在 <select> 标签中添加 id="pizza_kind"，例如 <select name="pizza_kind" id="pizza_kind">: jsfiddle 链接 你的代码之所以不起作用，简单地说是因为 $("#pizza_kind") 没有选择到 <select> 元素，因为它没有 id="pizza_kind"。
编辑：实际上，更好的选择器是 $("select[name='pizza_kind']"): jsfiddle 链接
8

抱歉回答这个旧帖子，但我认为我的代码可以帮助未来的其他人。我曾经也遇到同样的情况，即当复选框被选中时，将启用一些选定的输入字段，否则将禁用。

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

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

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

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

3

禁用一个下拉列表：

$("#your-selector").prop("disabled", true);

启用下拉列表：

$("#your-selector").prop("disabled", false);
2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接