【Javascript】jQueryのセレクタ Form Filters

前回まで4回にわたって、Formsセレクタ をみてきましたが、今回は、Form Filtersです。

Form Filtersは、 :textや:radioセレクタなどのようなFormの部品名そのものではなく、:enabledや:disabled、:checked、:selectedといった状態の要素にマッチします。

jQueryライブラリ本体の入手方法と、セレクタについてのドキュメントは下記のページにあります。

• jQuery
  • jquey.jsのダウンロード
• jQuery ドキュメント API/1.2/Selectors
• jQueryのダウンロードと設置

  これまで紹介した jQueryセレクタの記事

• 基本セレクタ
• 階層セレクタ
• 基本フィルタ1
• 基本フィルタ2
• コンテンツフィルタ
• 可視フィルタ
• 属性フィルタ1
• 属性フィルタ2
• Childフィルタ1
• Childフィルタ2
• Forms 1
• Forms 2
• Forms 3
• Forms 4
  

   

:enabled 使用可能な要素

まず、enabledな要素です。つまり、disabledな属性が指定されていない使用可能な要素にマッチするセレクタです。

では、試してみましょう。下記の左のフィールドは、カーソルを入れて入力可能です。(右のフィールドには入力できません)



ソースは次の通りです。

<div id="test1">
  <form>
    <input type = "text">
    <input type = "text" disabled>
  </form>
</div>

<script type="text/javascript">
  jQuery(function($){

    $("form :enabled","#test1")
      .val("入力できます")
      .focus(function(e){ 
        //カーソルが入ると文字が消えます
        $(this).val("")
      });

  });
</script>

<input type="text" disabled>とdisabled属性を付けてある右のフィールド要素には入力できませんが、左の要素へは入力できます。

このサンプルでは、ページ構築後に、その:enabledな要素を検索し、val()メソッドを使い、"入力できます"というvalue値を書き込んでいます。 また、カーソルが入るとfocusイベントで、その"入力できます"という値を$(this).val("")で空白に書き換えて消します。

次ページでは、 :disabled 使用不可な要素 を試します。