如何使用jQuery禁用/启用选择字段？ [英] How to disable/enable select field using jQuery?

问题描述

我想创建一个选项，如

  []我想订购一个[带有比萨饼的选择框] pizza 
  

其中selectbox仅在复选框被选中时被启用，而不被选中时被禁用。

我拿出这段代码：

 < form> 
< input type =checkboxid =pizzaname =pizzavalue =yes> < label for =pizza> 
我想订购< / label> 
< select name =pizza_kind> 
< option>（选择一个）< / option> 
< option value =margaritha> Margaritha< / option> 
< option value =hawai> Hawai< / option> 
< / select> 
披萨。 
< / 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 =复选框> 而不是< select> 时，代码有效

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

$ b

     <形式> 
< input type =checkboxid =pizzaname =pizzavalue =yes> 
< label for =pizza>我想订购< / label> 
< select id =pizza_kindname =pizza_kind> 
< option>（选择一个）< / option> 
< option value =margaritha> Margaritha< / option> 
< option value =hawai> Hawai< / option> 
< / select> 
披萨。 
< / 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 '，假）; 
} 
 else {
 $（'＃pizza_kind'）。prop（'disabled'，'disabled'）; 
} 
}; 
 $（update_pizza）; 
 $（＃pizza）。change（update_pizza）; 
< / script> 
  

这里是示例

I would like to create an option in a form like

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

where selectbox is enabled only when checkbox is checked and disabled when not checked.

I come up with this code:

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

I tried various methods how to set disabled attribute using .prop(), .attr(), and .disabled=. However, nothing happens. When applying to a <input type="checkbox"> instead of <select>, the code works perfectly.

How to disable/enable <select> using jQuery?

解决方案

You would like to use code like this:

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

​Here is working example

这篇关于如何使用jQuery禁用/启用选择字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！