HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML DOM ボタンの disabled プロパティとは？使い方を解説

HTML DOM の Button disabled プロパティは、<button> 要素の disabled 属性に関連付けられたプロパティです。このプロパティを使うことで、特定のボタンが無効化されているかどうかを設定（set）または取得（return）できます。

ボタンを無効化すると、ユーザーはそのボタンをクリックするなどして操作できなくなります。また、disabled プロパティを設定すると、多くの Web ブラウザではデフォルトでボタンがグレー表示になるため、ユーザー視覚的にも「押せない状態」であることが伝わります。

構文

disabled プロパティを設定する場合の構文は以下の通りです。

buttonObject.disabled = true|false

ここでの true|false は、対象のボタンを無効にするかどうかを指定します。

  • true： ボタンが無効化されます。
  • false： ボタンは無効化されません（有効なまま）。

それでは、ボタンの disabled プロパティの具体的な使用例を見ていきましょう。

サンプルコード

<!DOCTYPE html>
<html>
<body>
<button id="Button1">BUTTON</button>
<p>下のボタンをクリックすると、上のボタンが無効化されます。</p>
<button onclick="buttonDis()">CLICK IT</button>
<p id="Sample">
<script>
   function buttonDis() {
      document.getElementById("Button1").disabled = true;
      var x=document.getElementById("Button1").disabled;
      document.getElementById("Sample").innerHTML = "Button disabled is "+x;
   }
</script>
</body>
</html>

実行結果

このコードを実行すると、最初は次のように表示されます。

HTML DOM ボタンの disabled プロパティとは？使い方を解説

「CLICK IT」ボタンをクリックすると、次のように変化します。

HTML DOM ボタンの disabled プロパティとは？使い方を解説

コードの解説

上記の例では、まず id が「Button1」のボタンを作成しています。このボタンはデフォルトで有効な状態です。

<button id="Button1">BUTTON</button>

次に、クリックされたときに buttonDis() 関数を実行するための「CLICK IT」ボタンを作成しています。

<button onclick="buttonDis()">CLICK IT</button>

buttonDis() 関数では、getElementById() を使って id「Button1」のボタン要素を取得し、その disabled 属性を true に設定しています。これによりボタンが無効化され、クリックできなくなります。

その後、無効化したボタンの disabled の値（true または false）を変数 x に代入し、id「Sample」の段落要素内にその結果を表示しています。

function buttonDis() {
   document.getElementById("Button1").disabled = true;
   var x=document.getElementById("Button1").disabled;
   document.getElementById("Sample").innerHTML = "Button disabled is "+x;
}

このように、disabled プロパティを活用すれば、フォーム送信の二重クリック防止や、条件を満たすまでボタンを操作不可にするなど、さまざまな UI 制御を簡単に実装できます。

  1. HTML DOM Input リセットボタンの disabled プロパティの使い方を解説

    HTML DOM の Input Reset オブジェクトが持つ disabled プロパティは、フォーム内のリセットボタンを無効化するかどうかを設定したり、現在の状態を取得したりするために使用されます。このプロパティはブール値（true / false）を受け取り、true を設定するとリセットボタンが無効になり、false であれば有効な状態を保ちます。デフォルト値は false です。disabled プロパティが true に設定された要素は、グレーアウトして表示され、クリックすることもできなくなります。つまり、ユーザーはそのボタンと一切やり取りできなくなります。構文disabled

  2. HTML DOM Textarea disabledプロパティの使い方とサンプルコード

    HTML DOM の Textarea disabled プロパティは、HTML ドキュメント内の textarea 要素が無効（disabled）状態かどうかを取得したり、設定したりするためのプロパティです。ユーザーの操作状況に応じてフォームの入力欄を一時的に使用不可にしたい場合などに活用できます。 構文 disabled プロパティの基本的な構文は以下の通りです。 1. disabled の値を取得する場合 object.disabled 2. disabled の値を設定する場合 object.disabled = true | false true を指定するとテキストエリアが無効化さ