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

Question

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

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

我尝试了各种方法如何使用设置禁用属性.prop(),.attr()和.disabled=.然而,没有任何反应.当应用于<input type="checkbox">代替时<select>,代码完美地运行.

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

Answer 1

您想使用这样的代码:

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

这是一个有效的例子

Answer 2

要能够禁用/启用选择首先需要一个ID或类.然后你可以做这样的事情:

禁用:

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

启用:

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

Answer 3

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>

Answer 4

只需使用:

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

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

DEMO

Answer 5

使用以下内容:

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

或者只是添加id="pizza_kind"到<select>标签,例如<select name="pizza_kind" id="pizza_kind">:jsfiddle链接

你的代码不起作用的原因很简单,因为$("#pizza_kind")它没有选择<select>元素,因为它没有id="pizza_kind".

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

Answer 6

您select没有身份证,只有姓名.您需要修改选择器:

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

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

Answer 7

很抱歉在旧线程中回答，但将来我的代码可能会对其他人有所帮助。我当时处于同一情况下，当选中复选框时，很少选中的输入字段将被启用，其他则被禁用。

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