191

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

[] 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を使用して無効/有効にする方法は?

4

8 に答える 8

325

次のようなコードを使用したいとします。

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

ここに作業例があります

于 2012-05-13T07:55:22.887 に答える
129

まず選択を無効/有効にするには、選択に ID またはクラスが必要です。次に、次のようなことができます。

無効にする:

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

有効：

$('#id').removeAttr('disabled');
于 2012-05-13T07:49:59.173 に答える
27

Disabled はWHATWGで述べられているselect 要素のブール属性です。つまり、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>

XTMLではなくHTMLでのみ機能します

注:無効化された要素は、この質問で回答されているフォームでは送信されません:無効化されたフォーム要素は送信されません

注 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>
于 2015-03-25T19:37:51.557 に答える
16

単に使用するだけです：

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

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

デモ </p>

于 2012-05-13T07:51:30.820 に答える
9

以下を使用します。

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

または、次のようにタグに追加id="pizza_kind"するだけです: jsfiddle リンク<select><select name="pizza_kind" id="pizza_kind">

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

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

于 2012-05-13T07:47:19.673 に答える
8

古いスレッドで回答して申し訳ありませんが、私のコードが将来他の人に役立つかもしれません.iは同じシナリオで、チェックボックスがチェックされると、選択された入力フィールドがほとんど有効になり、そうでない場合は無効になります。

$("[id*='chkAddressChange']").click(function () {
    var checked = $(this).is(':checked');
    if (checked) {
        $('.DisabledInputs').removeAttr('disabled');
    } else {
        $('.DisabledInputs').attr('disabled', 'disabled');
    }
});
于 2015-02-11T09:08:13.417 に答える
5

名前だけで、ID はありませselectん。セレクターを変更する必要があります。

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

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

于 2012-05-13T07:56:29.837 に答える
2

良い質問です。これを達成する唯一の方法は、選択項目をフィルタリングすることだと思います。
これは、jquery プラグインを介して行うことができます。次のリンクを確認してください。必要なものに似たものを実現する方法が説明されています。jQuery
は、選択したラジオに基づいて SELECT オプションを無効にします (すべてのブラウザーのサポートが必要です)。

于 2012-05-13T07:45:31.250 に答える