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

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> 时，代码可以完美运行。

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

原文由 izidor 发布，翻译遵循 CC BY-SA 4.0 许可协议

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>

这是工作 示例

原文由 Community Driven Business 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

禁用：

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

使能够：

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

原文由 Obsivus 发布，翻译遵循 CC BY-SA 3.0 许可协议