デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

:disabled無効なフォーム要素を選択

構文

無効なフォームの要素を選択
$(":disabled")ver1.0〜
※:(コロン)を忘れないように注意しましょう

機能

:(コロン)に続けてdisabledを設定すると無効になっているフォームの要素を選択します。

解説

無効なフォーム要素を選択します

サンプル(disabled/01.html)を開いてbody内の構成を確認してください。input要素とbutton要素が2つづつあり、それぞれ1つが無効(disabled)になっています。

<input name="email" disabled="disabled" value="無効なテキストボックス"/>
<input name="id" value="有効なテキストボックス" />
<br>
<button>有効なボタン</button>
<button disabled="disabled">無効なボタン</button>

jQueryは以下の様に記述され、document(ブラウザ内)をクリックすると無効の要素を選択します。選択された要素はcssメソッドを利用して赤枠を付けます。

$(document).click(function(){
	$(":disabled").css("border","3px solid red");
});

他のセレクタと組みあわせる

サンプル(disabled/02.html)を開いてbody内の構成がdisabled/01.htmlと同じことを確認してください。jQueryは以下の様に少し変更され、複数のセレクタ(and)を利用してinput要素と組みあわせました。そのためbuttonをクリックするとinput要素で有効な要素だけが選択されます。

$(document).click(function(){
	$("input:disabled").css("border","3px solid red");
});

関連項目

有効なフォーム要素を選択する場合は:enabledを利用してください。