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=を使用してdisabled属性を設定する方法の様々な方法を試してみました。しかし、何も起こらない。 <select>の代わりに<input type="checkbox">に申し込むと、コードは完全に機能します。

<select> jQueryを使用して無効/有効にする方法はありますか？

Answer 1

あなたは、このようなコードを使用したいと思います：example

Answer 2

良い質問 - これを達成する唯一の方法は、選択項目をフィルタリングすることだと思います。
これはjqueryプラグインで実行できます。次のリンクを確認し、必要なものと似たものを実現する方法を説明します。おかげ
jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Answer 3

は、次を使用します。

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

それとも単に<select name="pizza_kind" id="pizza_kind">のように、<select>タグにid="pizza_kind"を追加：jsfiddle link

$("#pizza_kind")ではないので、あなたのコードは動作しませんでした理由は単純ですid="pizza_kind"がないため、<select>要素を選択してください。

編集：実際には、より良い選択は$("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); 

0次に、あなたがこのような何かを行うことができます

Answer 6

あなたselect IDを持っていない、名前だけが働いている

ここ

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

。ときチェックボックスがチェックされるのと同じシナリオにあった古いスレッドに答えるために残念http://jsbin.com/imokuj/2/edit

Answer 7

が、私のコードはfuture.iに他のことができますがあります。

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

デモ：あなたのセレクタを変更する必要があります選択された入力フィールドの数が少なくなると、それ以外の有効な無効化が可能になります。

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

Answer 8

障害者は、jQueryを使ってを無効にするには、RIGHT WAYは、これは、この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> 

になるだろう

jQuery("#selectId").attr('disabled',true); 

になることを意味し、WHATWGで述べたようにselect elementのBoolean Attributeです

これは両方の場合に有効ですXHTML and HTML (W3School reference)

しかし、それはまた

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

はHTMLだけの作品ではなくXTML

NOTE

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

なっプロパティとしてそれを使用して行うことができます。無効の要素はなくなりますがこの質問に回答したフォームに投稿：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>