web-dev-qa-db-ja.com

JQueryを使ってselectフィールドを無効/有効にするにはどうすればいいですか？

次のような形式でオプションを作成したい

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

ここで、selectboxはチェックボックスがチェックされているときだけ有効になり、チェックされていないときは無効になります。

私はこのコードを思い付きました：

<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属性を設定する方法をいろいろ試しました。しかし、何も起こりません。 <input type="checkbox">の代わりに<select>に適用すると、コードは完全に機能します。

JQueryを使って<select>を無効/有効にするにはどうすればいいですか？

jqueryhtmlforms
158
izidor

あなたはこのようなコードを使いたいです。

<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

267
Community Driven Business

すべての選択のうち最初に選択を無効/有効にするには、IDまたはクラスが必要です。それからあなたはこのようなことをすることができます：

無効にする： 

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

有効： 

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

WHATWG で示されているように、無効にされているのは ブール値 属性 select element の_で、これは RIGHT WAY TO DISABLEを意味します 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とHTML（W3Schoolリファレンス） の両方で機能します。

それでもプロパティとしてそれを使用して行うことができます

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

取得

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

これはHTMLに対してのみ機能し、XTMLに対しては機能しません。

注： 無効な要素は、この質問で回答したフォームと一緒に送信されません。 無効なフォーム要素は送信されません

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

単に使用する：

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

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

_ demo _

15
The System Restart

以下を使用してください。

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

あるいは単にid="pizza_kind"を<select>タグに追加してください、例えば<select name="pizza_kind" id="pizza_kind">： jsfiddle link

コードが機能しなかったのは、<select>がないため$("#pizza_kind")がid="pizza_kind"要素を選択していないからです。

編集：実際には、より良いセレクタは$("select[name='pizza_kind']")です： jsfiddleリンク

8
K Z

古いスレッドで答えて申し訳ありませんが、将来的に私のコードが他のものを助けてくれるかもしれません。

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

あなたのselectにはIDがなく、名前だけがあります。セレクタを変更する必要があります。

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

デモ： http://jsbin.com/imokuj/2/edit

5
Sampson

良い質問です - これを達成する唯一の方法はselectの中のアイテムをフィルタすることです。
あなたはjqueryプラグインを通してこれを行うことができます。次のリンクをチェックしてください、それはあなたが必要とするものと同様の何かを達成する方法を説明します。ありがとう
jQueryは選択されたラジオに基づいてSELECTオプションを無効にします（すべてのブラウザのサポートが必要です）

2
Joseph Caruana