jQuery、チェックボックスの操作をする時の注意点（attr、prop）

今回jQueryのチェックボックスの操作で、思わぬドツボにハマったのでメモしておきます。

jQueryを使ってチェックボックスにチェックを入れる改修を頂き、対応していました。見るからに簡単そうな作業かと思いきや結構時間がかかりました。

チェックボックスを操作するサンプル

まずはサンプルを見て下さい。

<script language="JavaScript">
<!--

jQuery(function($){
  // チェックボックスのチェックを外す
  $("#sample1").attr('checked',false);
});

//-->
</script>

<input type="checkbox" id="sample1" name="sample1" value="1" />

これは問題なく動作してくれて、ちゃんとチェックが外れます。

しかし、逆に下記のようにチェックを入れような処理を実行すると、チェックは付くのですが時々内部エラーになったりしてなかなか挙動が安定しません。

jQuery(function($){
  // チェックボックスのチェックを外す
  $("#sample1").attr('checked',true);
});

attrとprop

attrとは

そもそもjQueryのattrとは、HTML要素の属性情報を取得したり、設定したりするためのものです。

もっと詳しく説明すると、例えばinputタグで言えばそれに含まれるidやname、type、valueなどの値を取得/編集することが可能です。

<input id="sample2" name="sample2" type="text" value="サンプル２" size="30" maxlength="20">

<script language="JavaScript">
<!--
jQuery(function($){
  alert( $("#sample2").attr('id') );
    // 「sample2」という値が取得され、ポップアップに出力される
  alert( $("#sample2").attr('type') );
    // 「text」という値が取得され、ポップアップに出力される
  alert( $("#sample2").attr('value') );
    // 「サンプル２」という値が取得され、ポップアップに出力される

  $("#sample2").attr('id', 'sample02');
    //id属性が「sample2」から「sample02」に変更される
  $("#sample2").attr('maxlength', '60');
    //入力文字数の上限が「20」文字から「60」文字に変更される
});
//-->
</script>

 上記の例を考慮して考えると、チェックボックスにチェックを入れるためには「checked="checked"」と属性情報を付与する必要があるため、「$("#sample1").attr('checked',true);」は設定の仕方としてよろしくないことが分かります。

正しくは以下の方法がよさそうです。

$("#sample2").attr('checked','checked');

チェックを外す際の「$("#sample1").attr('checked',false);」がなぜ問題なく動くのかは正直よく分かりません。^^;

propとは

attrについて説明してきましたが、正直チェックを入れる処理でattrを使うのはあまりよろしくないようです。「attr('checked','checked');」と記載しても挙動が安定してくれないという声が、ネット上でいくつか見受けられました。

処理をより安定させたい場合は、attrの代わりにpropを使いましょう。

propとは、attrと似た機能を持っていますが、propの方は「checked / disabled」属性においての属性の状態を返してくれる違いがあります。

正直自分でも正確にはわかってませんが、要はpropだどchecked属性でtrue/falseのboolean型で扱えるという認識です。

チェックを入れる処理として以下の書き方で安定して動いてくれます。

$("sample2").prop('checked',true);

但し注意点として、propを使う場合はjQueryのバージョンが1.6以上でないと使えません。

自分の担当していたシステムは相当古いもので、jQueryのバージョンが1.4.1だったため結局prop使えず、別の方法で対応する羽目になりました。