jQueryにおけるattrとpropの違いと使いドコロまとめ #jQuery

checkboxやradioのチェック状態を調べる際にはattrではなくpropを使うのが良い。
attrでも取れないこともないですが、propで取得する方が処理が早いです。
特にIEの場合、inputに対するdisabledの処理がものすごく重く、attrでdisabledやcheckedの処理を沢山していると、無駄に最悪な感じで負荷がかかります。

attrとpropの取得の違い

またこの２つは、同じ値を取得してるようで異なる値を取得するので注意。

例えば

//チェックした値を取得するよー
$(":checkbox").click(function() {
   alert($(this).prop('checked'));     
　alert($(this).attr('checked'));
});

の場合、

チェック時
prop true
attr checked

非チェック時
prop false
attr undefined

という全然違う値が返ってきます。

なぜ解釈が違うのか

attrは純粋に 属性における値 を取得するので、この場合は、

checkされてない
↓
checkedという『属性』がない！
↓
undefined

という認識をしています。

一方でpropは、checkedという プロパティの真偽 を取得してくれます。なので、

checkされてない
↓
checkedという『プロパティ』はfalse
↓
falseだよー

という解釈をします。

以前のバージョンではプロパティもなんとなく取得していた雰囲気のattrですが、propが一人前に育ってきたので本格的に属性の取得に専念した印象があります。…個人的にですが。
最近のjQueryのバージョンだとこの辺が厳密になってきている印象を受けます。古いプラグインだとjQueryによるattrの処理の解釈が違うばっかりに動作しないなどがあったりするので、プラグインがバージョンによって動かない際にはその辺なども見てみるといいかもしれないです。

inputはprop！

HTMLの属性を取得する場合はattr、input関連の値を取得する場合はprop、と考えておくといいと思います。
また、inputのプロパティを取得する以外に、hrefを取得する際なども、propではURLの値をまるごと取得してくれたり、色々便利に使えます。

propのサンプル

以下、disabledのサンプルです。参考までにあげときます。

チェックボックスがチェックされたら、inputを入力できるようにする

jQuery

$('#test_chk').on('change',function(){
   var chk = $(this).prop('checked'),
   obj = $('#test_input');
   (chk) ? obj.prop('disabled',false) : obj.prop('disabled',true) ;
});

HTML

<input name="" type="checkbox" value="" id="test_chk" />
<label for="test_chk">chk1</label>
<input name="" type="text" id="test_input" disabled="disabled" />

セレクトバージョン(indexが2のやつ(上から3番目)を選択したらdisabledを解除)

jQuery

$('#test_select').on('change',function(){
    var chk = $(this).prop('selectedIndex'),
    obj = $('#test_input');
    (chk==2) ? obj.prop('disabled',false) : obj.prop('disabled',true) ;
});

HTML

<select name="" id="test_select">
     <option>00000</option>
     <option>11111</option>
     <option>ここが選択されたらinputのdisabledを解除するよー</option>
</select>
<input name="" type="text" id="test_input" disabled="disabled" />