attr()とprop()とchecked属性とcheckedプロパティと...
うろ覚えでいつもググってしまう悪い癖なんだけど、チェックボックスのチェックをつけたり外したりとか、ラジオボタンの選択をソースコードからしたいとかいう場合。
<input type="checkbox" id="foo">
ここで、ググって良く当たるのがattr()を使う方法だったりして、うまくいかず「はぁ?」ってなってprop()を使う方法とかに行き着いたりする。
// チェックを付ける処理 $('#foo').attr('checked', true); // これうまくいかない $('#foo').prop('checked', true); // こっちはうまくいく
そもそもなんでattr()使ってうまくいかないんだろうか、と思って色々調べてみた。
結論からいうと、jQuery1.6.0と1.9系以降はうまくいかない、ってことみたい。
[jQuery] attr(‘checked’)で取得したチェックボックスの値が変わらない | 黒川仁の文具堂ブログ三昧
attr()は属性に対する操作を行うもので、prop()はプロパティに対する操作を行うもの。
1.5系以前や1.6.1~1.8系のattr()は属性だけでなくプロパティに対する操作もカバーしようとしていたのだが、バグが発生しやすくメンテナンスが大変だったため、属性とプロパティに対する操作を行うメソッドを完全に分けたという経緯らしい。
また、チェックボックスやラジオボタンにデフォルトのチェックを入れるためのchecked属性は、あくまで初期値を示すものであり、ページが表示されたあとにチェックの状態を変更しても属性値は変わらない。
このとき変わっているのがcheckedプロパティであり、prop()で操作できる値、ってこと。
JavaScript Ninjaの極意 ライブラリ開発のための知識とコーディング (Programmer's SELECTION)
- 作者: ジョン・レシグ,John Resig,ベア・ビボー,Bear Bibeault,勝亦勇,吉川邦夫
- 出版社/メーカー: 翔泳社
- 発売日: 2013/05/25
- メディア: 大型本
- この商品を含むブログ (9件) を見る
- 作者: David Herman,吉川邦夫
- 出版社/メーカー: 翔泳社
- 発売日: 2013/02/19
- メディア: 大型本
- 購入: 1人 クリック: 109回
- この商品を含むブログを見る