:disabled クラス

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

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

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

:disabled 例

-- HTMLファイル --

<inputdisabled><label>:disabledに反応するリンク例</label></input>

-- CSSファイル --

input:disabled {
  background-color: gray;
}

ページ内 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 擬似クラスが機能することで、項目名はグレイ色になっています。