jQueryでdisabledを解除するには？

Webページのフォーム要素で、特定の条件下でボタンや入力フィールドを無効化し、その後再び有効化したい場合があります。jQueryを使用すると、この操作を簡単に行うことができます。

要素を無効にするには、prop() メソッドを使用して disabled 属性を true に設定します。逆に、無効化を解除するには、prop() メソッドの第2引数に false を指定します。

prop() メソッドを使ったdisabledの解除

prop() メソッドは、要素のプロパティにアクセスしたり、設定したりするために使用します。disabled 属性もプロパティの一つであり、prop() メソッドで操作することができます。

prop('disabled', false) を実行することで、対象の要素の disabled 属性が解除されます。

HTMLの例とjQueryのコード

以下は、ボタンとテキストフィールドがあり、ボタンクリックでテキストフィールドのdisabled属性を解除する例です。


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myButton").click(function(){
    $("#myInput").prop("disabled", false);
  });
});
</script>
</head>
<body>

<input type="text" id="myInput" disabled>
<button id="myButton">ボタン</button>

</body>
</html>

状況に応じたdisabled解除

上記の例では、ボタンクリックで無条件にdisabledを解除しましたが、実際には特定の条件を満たした場合のみ解除したい場合もあるでしょう。

例えば、チェックボックスにチェックが入っている場合のみボタンを有効化する場合は、以下のように記述します。


<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#myCheckbox").change(function(){
    if($(this).is(":checked")){
      $("#myButton").prop("disabled", false);
    } else {
      $("#myButton").prop("disabled", true);
    }
  });
});
</script>
</head>
<body>

<input type="checkbox" id="myCheckbox">有効化する
<button id="myButton" disabled>ボタン</button>

</body>
</html>

まとめ

jQuery の prop() メソッドを使用することで、要素のdisabled属性を簡単に操作できます。状況に応じてdisabled属性を制御することで、ユーザーフレンドリーなフォームを作成できます。

参考資料

<a href="https://api.jquery.com/prop/">jQuery.prop() | jQuery API Documentation</a>

よくある質問

質問	回答
`prop()` メソッドと `attr()` メソッドの違いは何ですか？	`prop()` メソッドは要素のプロパティに、`attr()` メソッドは要素の属性にアクセス・設定します。`disabled` のような状態を表す属性は `prop()` を使用すべきです。
複数の要素のdisabledを一括で解除することはできますか？	はい、jQueryのセレクタを使用して複数の要素を取得し、`prop('disabled', false)` を実行することで一括解除できます。
disabledを解除した要素にスタイルを追加するにはどうすればよいですか？	`css()` メソッドを使用して、disabledが解除された要素にスタイルを追加できます。

その他の参考記事:jquery checked