的 TL; DR

Question

我想以

之类的形式创建一个选项

[] 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=设置已停用的属性。然而，没有任何反应。在应用<input type="checkbox">代替<select>时，代码可以正常运行。

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

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>

这是有效的example

Answer 2

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

停用

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

启用：

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

Answer 3

已Boolean Attribute select element WHATWG已被XHTML and HTML (W3School reference)所述，这意味着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>

这适用于The disabled form element is not submitted

然而，也可以使用它作为属性

来完成

jQuery("#selectId").prop('disabled', 'disabled');

获得

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

仅适用于HTML而不适用于XTML

注意：我们不会使用此问题中的答案提交已停用的元素：{{3}}

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

您的代码无效的原因仅仅是因为$("#pizza_kind")没有选择<select>元素，因为它没有id="pizza_kind"。

编辑：实际上，更好的选择器是$("select[name='pizza_kind']")：jsfiddle link

Answer 6

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

$("#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');
    }
});

Answer 8

好问题 - 我认为实现此目的的唯一方法是过滤选择中的项目。
您可以通过jquery插件执行此操作。检查以下链接，它描述了如何实现类似于您需要的东西。由于
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

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

8 个答案:

的 TL; DR