備忘録的プログラミングリファレンス

: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)

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