☰

jQueryを使用して選択フィールドを無効/有効にする方法は? 質問する

tag-icon • tag-icon jquery html forms
jQueryを使用して選択フィールドを無効/有効にする方法は? 質問する

次のようなフォームにオプションを作成したい

[] 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>、コードは完全に機能します。

<select>jQuery を使用して無効/有効にする方法は?

ベストアンサー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>

​ここで働いています例

おすすめ記事