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

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

:enabled有効なフォーム要素を選択

構文

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

機能

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

解説

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

サンプル(enabled/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(){
	$(":enabled").css("border","3px solid red");
});

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

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

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

関連項目

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