:disabled クラス

　:disabled クラスは、タグエレメントに disabled パラメーターが設定されたらスタイルを反映する擬似クラスです。対となる疑似クラスに :enabled があります。

　disabled はタグエレメントのパラメーターのひとつで、無効なエレメントであることを示します。アクティブにならない、データの送信ができないようにする機能です。

　対象となるタグエレメントは<input>、<button>、<textarea>、<fieldset>などの <FORM> 部品です。

:disabled

-- HTMLファイル --
<label>:disabled の例 <input type="text" disabled></input></label>

-- CSSファイル --
input:disabled {
  background-color: gray;
}

表示例

:disabled の例

詳しくは Example を参照してください

ページ内 Index

構文（Syntax）
Example

構文(Syntax)

CSS

HTMLElement:disabled {
  style_propaties;
}

DOM ( JavaScript )

　疑似クラスは DOM ( JavaScript )から操作できません。

　以下は diabled が設定された <input> エレメントに付随する <label> の文字色を JavaScript で変更する方法例です。

　しかしながら、スタイルのみの適応は擬似クラスを利用したほうが簡易です。

in HTML

<input type="radio" name="example" id="lbl00"><label for="lbl00">みけねこ</label></input>
<input type="radio" name="example" id="lbl01"><label for="lbl01">とらねこ</label></input>
<input type="radio" name="example" id="lbl02" disabled><label id="lbl03">チーター</label></input>

in JavaScript

var _elements = document.getElementsByTagName('input');
for( i=0; i < _elements.length; i++ ){
	if( _elements[i].disabled ){
		var _lbl = document.querySelector('label[for="' + _elements[i].id + '"]');
		_lbl.style.color="gray";
		break;
	}
}

Example

　:disabled の例です。 diabled パラメーターが設定された項目は入力できません。この diabled 擬似クラスが機能することで、項目名はグレイ色になっています。