disabled属性

属性 disabled は、HTML フォームの要素をブロックし、つまり非アクティブにします。値を持たない属性です。

要素のブロックは通常、ユーザーが特定の値（それでもフォーム要素としてユーザーに表示する必要があるもの）を変更するのを禁止するために使用されます。時々、JavaScriptを使用して要素をブロック（またはブロック解除）します。

動作

ボタン（button または input で属性 type の値が button, reset, submit の場合）の場合、ブロックはボタンをクリックできなくなることを意味します。テキスト入力フィールド（input または textarea）の場合、そのテキストを変更またはコピーすることができなくなります。チェックボックスやラジオボタンの場合、その状態（チェックされているかどうか）を変更できなくなります。ドロップダウンリスト select の場合、選択されたリスト項目を変更できなくなります。

ブロックされた要素はデフォルトで灰色の背景を持ちます。また、Tabキーによる移動にも参加しません。

例 . ブロックされたボタン

属性 disabled を使用してボタンをブロックしてみましょう。比較のために、ブロックされていないボタンの例を隣に置きます（クリックしてみてください）：

html<button disabled>text</button>
<button>text</button>

Результат:

例 . ブロックされたチェックボックス

次に、ブロックされたチェックボックスのフラグを見てみましょう。比較のために、ブロックされていないフラグの例を隣に置きます：

html<input type="checkbox" disabled>
<input type="checkbox">

Результат:

例 . ブロックされ、チェックされたチェックボックス

属性 checked を使用してチェックされ、ブロックされたチェックボックスのフラグがどのように見えるか見てみましょう。比較のために、ブロックされていないチェックされたフラグの例を隣に置きます：

html<input type="checkbox" disabled checked>
<input type="checkbox" checked>

Результат:

例 . ブロックされたテキスト入力

次に、入力をブロックしてみましょう。比較のために、ブロックされていない入力の例を隣に置きます：

html<input type="text" value="text" disabled>
<input type="text" value="text">

Результат:

例 . ブロックされたテキストエリア

ここでは、ブロックされたテキストエリアを見ます（ブロックされたtextareaのサイズを変更できることに注意してください）。比較のために、ブロックされていないテキストエリアの例を隣に置きます：

html<textarea disabled>text</textarea>
<textarea>text</textarea>

Результат:

例 . ブロックされたドロップダウンリスト

ブロックされた select がどのように機能するか見てみましょう。比較のために、ブロックされていないドロップダウンリストの例を隣に置きます：

html<select disabled>
  <option>city1</option>
  <option selected>city2</option>
  <option>city3</option>
  <option>city4</option>
</select>
<select>
  <option>city1</option>
  <option selected>city2</option>
  <option>city3</option>
  <option>city4</option>
</select>

Результат:

関連項目