如何使用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？

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

好問題 - 我認爲實現這一目標的唯一方法是篩選select中的項目。
你可以通過jquery插件來做到這一點。檢查以下鏈接，它描述瞭如何實現類似於您需要的內容。謝謝
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Answer 3

使用以下：

$("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 4

爲了能夠禁用/首先你需要選擇一個ID或類啓用選擇。然後，你可以做這樣的事情：

禁用：

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

啓用：

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

Answer 5

只需簡單地使用：

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

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

DEMO

Answer 6

您select沒有一個ID，只是一個名字。你需要修改你的選擇：

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

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

Answer 7

對不起，在舊線回答，但可能我的代碼有助於future.i其他在相同的情況下，當複選框將被選中那麼很少選擇的輸入字段將被啓用，其他明智的禁用。

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

Answer 8

殘疾人是select element的Boolean Attribute由WHATWG指出，這意味着RIGHT WAY禁用使用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 and HTML (W3School reference)

然而，它也可以用它作爲財產

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

越來越

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

這僅適用於HTML，而不是XTML

注意做到：禁用的元素不會以此問題中回答的形式提交：The disabled form element is not submitted

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