もやもやエンジニア

IT系のネタで思ったことや技術系のネタを備忘録的に綴っていきます。フロント率高め。

jQueryの話 attrとpropの違い

多分、知っている人にはいまさら何言ってんのとお叱りを受けそうな話ですが、知らんかったので備忘録的にメモ。

仕事で作っているサイトはjQueryのバージョン1.3.2を使っているのですが、いい加減新しいの使おうよということで、こつこつ1.9系に書き直していっています。
(そんなことやってるうちに1.10系が出てしまいました。時代の流れは早いなあ・・・)

で、入力補助的な機能をもくもく実装してたのですが、↓のコードがなぜか意図した通りに動かないのです。

$('#フォームの名前').on('click', 'ボタン名', function(e){
    $('チェックボックスを指定するセレクタ').attr('checked', true);
});

ボタンを押すと指定したチェックボックスに自動でチェックを入れるというコードですね。
今まではこれで動いていたのですが、1.9.1に入れ替えたらなぜか動かない・・・
chromeの開発者ツールでみると属性はちゃんとついている不思議。

???と思いながらjQueryオブジェクト使わずに生のDOM APIを使うと動く。こんな感じ。

$('#フォームの名前').on('click', 'ボタン名', function(e){
    $('チェックボックスを指定するセレクタ')[0].checked = true;
});

で、気になって調べてみると、どうやら今時のjQueryではattrでチェックを入れるのは非推奨な書き方のようです。

正解はpropを使います。

$('#フォームの名前').on('click', 'ボタン名', function(e){
    $('チェックボックスを指定するセレクタ').prop('checked', true);
});

これで意図した通りにチェックボックスのチェックがon/off出来るようになりました。

どうも1.6系あたりからこの仕様になった模様。

.attr()はHTMLの属性を扱う
.prop()はJavaScriptのプロパティを扱う

ということらしいです。なので、attrは属性としてのcheckedをつけただけで、DOMのcheckedプロパティには何にもしないということになりますね。chromeでみた時は属性がついていたという点も納得。

ちなみにdisabledの制御も同じ話になると思いますので注意 |*。´Д`|┛

jQueryクックブック

jQueryクックブック