:disabled

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

:disabledCSS擬似クラスで、無効な要素を表します。無効な要素とは、アクティブ化(選択、クリック、入力など)したりフォーカスを得たりすることができないものです。要素には有効な状態、つまりアクティブ化したりフォーカスを得たりすることができる状態もあります。

css
/* 無効な <input> を選択 */
input:disabled {
  background: #ccc;
}

試してみましょう

構文

:disabled

この例は基本的な送り先フォームを表示します。 JavaScriptchange イベントを使用して、ユーザーが請求先欄を有効化/無効化できるようにします。

HTML

html
<form action="#">
  <fieldset id="shipping">
    <legend>送り先</legend>
    <input type="text" placeholder="名前" />
    <input type="text" placeholder="住所" />
    <input type="text" placeholder="郵便番号" />
  </fieldset>
  <br />
  <fieldset id="billing">
    <legend>請求先</legend>
    <label for="billing_is_shipping">送り先と同じ:</label>
    <input type="checkbox" id="billing-checkbox" checked />
    <br />
    <input type="text" placeholder="名前" disabled />
    <input type="text" placeholder="住所" disabled />
    <input type="text" placeholder="郵便番号" disabled />
  </fieldset>
</form>

CSS

css
input[type="text"]:disabled {
  background: #ccc;
}

JavaScript

js
// ページの読み込みの終了を待つ
document.addEventListener(
  "DOMContentLoaded",
  function () {
    // チェックボックスに 'change' イベントリスナーを追加
    document.getElementById("billing-checkbox").onchange = toggleBilling;
  },
  false,
);

function toggleBilling() {
  // 請求先のテキストフィールドを選択
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // 請求先テキストフィールドを切り替え
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

結果

仕様書

Specification
HTML
# selector-disabled
Selectors Level 4
# disabled-pseudo

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
:disabled

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

関連情報