フォーム入力固定、機能グレーアウト、権限制限…HTMLのdisabled属性でできること全て教えます

構文

disabled属性は、ブール値属性です。つまり、属性値を指定する必要はなく、単に属性が存在するだけでその要素が無効化されます。

<input type="text" disabled>
<button disabled>送信</button>
<select disabled>
  <option value="1">オプション 1</option>
  <option value="2">オプション 2</option>
</select>

上記のように、disabled属性をinput、button、selectなどの要素に直接付加することができます。

使用例

以下に、disabled属性の具体的な使用例をいくつか示します。

フォームの入力値を固定する

<form>
  <label for="name">名前：</label>
  <input type="text" id="name" value="山田 太郎" disabled>

  <label for="email">メールアドレス：</label>
  <input type="email" id="email" value="[email protected]" disabled>

  <input type="submit" value="送信">
</form>

この例では、nameとemailの入力フィールドがdisabled属性で無効化されています。そのため、ユーザーはこれらのフィールドの値を変更することはできません。

まだ利用できない機能をグレーアウト表示する

Webサイトの新機能を開発中の場合、まだ利用できない機能をグレーアウト表示して、ユーザーが誤って操作しないようにすることがあります。このような場合、disabled属性とCSSを組み合わせて、グレーアウト効果を作成することができます。

<button disabled>機能開発中</button>

/* グレーアウトされたボタンのスタイル */
button[disabled] {
  opacity: 0.5;
  cursor: default;
}

この例では、button要素がdisabled属性で無効化されています。さらに、CSSでopacityプロパティとcursorプロパティを設定することで、ボタンがグレーアウト表示され、マウスカーソルがポインタではなくデフォルトの状態になります。

特定のユーザーのアクセスを制限する

管理者権限が必要な機能を、一般ユーザーが操作できないようにしたい場合があります。このような場合、disabled属性とJavaScriptを使用して、ユーザーの権限に応じて要素を無効化することができます。

<button id="adminButton">管理者機能</button>

const adminButton = document.getElementById('adminButton');

if (!isAdmin) {
  adminButton.disabled = true;
}

この例では、isAdminという変数が、現在のユーザーが管理者権限を持っているかどうかを示します。ifステートメントの中で、isAdminがfalseの場合、adminButton要素がdisabled属性で無効化されます。

disabled属性と似ている属性にreadonly属性があります。readonly属性は、入力フィールドを編集不可にするために使用されますが、ユーザーは依然としてフィールドを選択したり、フォーカスしたりすることができます。一方、disabled属性は、要素を完全に無効化し、ユーザーが一切操作できなくなります。

属性	説明	ユーザー操作	フォーム送信
`disabled`	要素を無効化する	選択、編集、フォーカス不可	送信されない
`readonly`	入力フィールドを編集不可にする	選択、フォーカス可能	送信される

フォームの入力値を固定する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォームの入力値を固定する</title>
</head>
<body>
  <h1>アンケートフォーム</h1>
  <form>
    <label for="name">名前：</label>
    <input type="text" id="name" value="山田 太郎" disabled>

    <label for="email">メールアドレス：</label>
    <input type="email" id="email" value="[email protected]" disabled>

    <label for="comment">コメント：</label>
    <textarea id="comment" disabled>ご意見ありがとうございます。</textarea>

    <input type="submit" value="送信">
  </form>
</body>
</html>

まだ利用できない機能をグレーアウト表示する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>グレーアウト表示</title>
  <style>
    /* グレーアウトされたボタンのスタイル */
    button[disabled] {
      opacity: 0.5;
      cursor: default;
    }
  </style>
</head>
<body>
  <h1>新機能開発中</h1>
  <button disabled>機能開発中</button>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>アクセス制限</title>
  <script>
    const isAdmin = false; // 管理者権限の有無を示すフラグ
    const adminButton = document.getElementById('adminButton');

    if (!isAdmin) {
      adminButton.disabled = true;
    }
  </script>
</head>
<body>
  <h1>管理者機能</h1>
  <button id="adminButton">管理者機能</button>
</body>
</html>

上記以外にも、disabled属性を様々な目的に活用することができます。例えば、以下のような用途が考えられます。

ゲームやクイズのインタラクションを制御する
ラジオボタンやチェックボックスの初期状態を設定する
特定のオプションを選択できないようにする
特定の曜日の日付を選択できないようにする

disabled属性は、Webサイトのアクセシビリティを向上させるためにも役立ちます。例えば、視覚障害者向けのスクリーンリーダーでは、無効化された要素を認識して、ユーザーに伝えることができます。

詳細は、以下のリソースを参照してください。

HTMLのdisabled属性 - MDN Web Docs

readonly属性

readonly属性は、入力フィールドを編集不可にするために使用されます。ユーザーは依然としてフィールドを選択したり、フォーカスしたりすることができますが、値を変更することはできません。

利点

スクリーンリーダーなどの支援技術と互換性が高い
disabled属性よりもシンプルで分かりやすい

欠点

送信時に値が送信される
ユーザーがフィールドを選択したり、フォーカスしたりすることができるため、誤操作の可能性がある

例

<input type="text" id="name" value="山田 太郎" readonly>

ARIA属性

ARIA属性は、Webページのアクセシビリティを向上させるために使用される一連の属性です。aria-disabled属性を使用して、要素が無効化されていることを示すことができます。

利点

JavaScriptを使用して動的に無効化された要素をサポートできる
readonly属性よりも詳細な情報を提供できる

欠点

古いスクリーンリーダーではサポートされていない場合がある
disabled属性よりも複雑で、実装に手間がかかる

例

<button aria-disabled="true">送信</button>

JavaScript

JavaScriptを使用して、要素を動的に無効化することができます。これにより、より柔軟な制御が可能になります。

利点

disabled属性やARIA属性では実現できない複雑なロジックを実装できる
状況に応じて要素を無効化したり有効化したりすることができる

欠点

JavaScriptがサポートされていないブラウザでは動作しない
disabled属性やARIA属性よりも複雑で、実装に手間がかかる

例

<button id="myButton">送信</button>

<script>
  const myButton = document.getElementById('myButton');

  myButton.addEventListener('click', function() {
    if (myButton.disabled) {
      alert('このボタンは現在無効化されています。');
      return false;
    }

    // ボタンが有効な場合の処理
  });

  // 特定の条件下でボタンを無効化する
  if (条件が満たされない) {
    myButton.disabled = true;
  }
</script>

CSSを使用して、無効化された要素の外観を変更することができます。ただし、これだけでは要素を実際に無効化することはできません。

利点

ユーザーに対して視覚的に無効化されていることを示すことができる

欠点

スクリーンリーダーなどの支援技術では認識されない
要素を実際に無効化することはできない

例

/* 無効化されたボタンのスタイル */
button[disabled] {
  opacity: 0.5;
  cursor: default;
}

上記以外にも、状況に応じて様々な代替方法が考えられます。例えば、以下のような方法があります。

イベントハンドラを削除する
要素を別の要素で置き換える
要素を非表示にする

どの代替方法が最適かは、具体的な状況によって異なります。disabled属性を使用する前に、上記の代替方法を検討することをお勧めします。

CSSを使用する場合は、視覚的な明瞭性を確保する必要があります。
JavaScriptを使用する場合は、パフォーマンスとユーザーエクスペリエンスに注意する必要があります。
アクセシビリティを考慮する場合は、aria-disabled属性を使用することを強くお勧めします。