Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
624
Help us understand the problem. What is going on with this article?
@kbyay_

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

More than 5 years have passed since last update.

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

attrとpropの取得の違い

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

例えば

//チェックした値を取得するよー
$(":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" />
624
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kbyay_
メモ書きと覚書き。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
624
Help us understand the problem. What is going on with this article?