jQuery 2.1.1 で attr() を使って checked を操作するときの動き

~attr()のjQueryバージョン間の違い~
2014/10/27

checkboxをattr()で操作

←操作対象のチェックボックス
$("#c1").attr("checked", ★); ※ボタンのラベルは★の内容。

チェックがつくグループ

バージョンによって動きが変わるグループ

チェックがはずれるグループ

checked属性値の確認


Version チェック
の操作
備考
2.1.1 指定した値にかかわらず「"checked"」が設定される。初期以降の操作ができない。「"true"」「"false"」半角空白・空文字でチェックが付く
2.0.0 指定した値にかかわらず「"checked"」が設定される。初期以降の操作ができない。「"true"」「"false"」半角空白・空文字でチェックが付く
1.11.1 指定した値にかかわらず「"checked"」が設定される。初期以降の操作ができない。「"true"」「"false"」半角空白・空文字でチェックが付く
1.11.0 指定した値にかかわらず「"checked"」が設定される。初期以降の操作ができない。「"true"」「"false"」半角空白・空文字でチェックが付く
1.9.0 指定した値にかかわらず「"checked"」が設定される。初期以降の操作ができない。「"true"」「"false"」半角空白・空文字でチェックが付く
1.8.3 指定した値にかかわらず「"checked"」が設定される。「"true"」「"false"」半角空白・空文字でチェックが付く
1.8.0 指定した値にかかわらず「"checked"」が設定される。「"true"」「"false"」半角空白・空文字でチェックが付く
1.7.0 指定した値にかかわらず「"checked"」が設定される。「"true"」「"false"」半角空白・空文字でチェックが付く
1.6.2 指定した値にかかわらず「"checked"」が設定される。「"true"」「"false"」半角空白・空文字でチェックが付く
1.6.1 「"true"」「"false"」半角空白・空文字などでは属性値は指定された値を設定する。 ただし「true」が指定された場合には「"checked"」を設定する。 チェックの状態は変わらない。 また、「attr()」で値を取得すると、設定された値ではなく「"checked"」を返す。 つまり「attr()」と「getAttribute()」の結果が異なる
1.6.0 「"true"」「"false"」半角空白・空文字などでは属性値は指定された値を設定する。 ただし「true」が指定された場合には「"checked"」を設定する。 チェックの状態は変わる。 また、「attr()」で値を取得すると、設定された値そのものを返す
1.5.2 属性の操作は一切せずにプロパティの操作だけをしている。「"true"」「"false"」半角空白でチェックが付く。空文字はチェックが外れる
1.5.0 属性の操作は一切せずにプロパティの操作だけをしている。「"true"」「"false"」半角空白でチェックが付く。空文字はチェックが外れる
1.4.0 属性の操作は一切せずにプロパティの操作だけをしている。「"true"」「"false"」半角空白でチェックが付く。空文字はチェックが外れる
1.2.3 属性の操作は一切せずにプロパティの操作だけをしている。「"true"」「"false"」半角空白でチェックが付く。空文字はチェックが外れる

上記から、仕様が何度も変更されていることが分かります。開発チームの苦悩を感じます。 特に1.5.2~1.6.2は4世代連続で仕様が変更されています。

1.5.2までは完全にプロパティの操作しかしておらず、「attr("checked")」で返す値も属性値は完全に無視していました。 1.6.0からprop()が新設され、属性の操作とプロパティの操作を分離しようとする意思は汲み取れますが、 「過去のバージョンとの互換性の維持」と「純粋な属性操作」のどちらをとるかで迷走していたように思えます。

大きな傾向としてバージョンが新しくなるにつれ、プロパティの操作から属性操作の方向に 向かおうとしているように見えます。 特に1.9.0以降はプロパティの操作を完全に止めたため、チェックの操作ができなくなったようです。

とにかく、attr()を使用する際にはバージョンによって動きがかなり異なるということを意識するようにしましょう。

※Chrome38で調査。このページはバージョンを一つ一つ手作業で確認しながら情報を書き留めました。 もしかしたら確認ミス等があるかもしれません。事実と異なる点を見つけた際にはその部分を教えていただきたいです。よろしくお願いします。


jQuery propとattrに戻る

ちょこっとアンケート&メッセージ

このページに関するちょっとした感想または、要望、バグ・間違いの指摘などは、下記の送信欄からお送りください。 質問・その他お問合せなど、返信をご希望の方は「こちらのページ」からメッセージをお送りください。

「このページはお役に立ちましたか?」のアンケートとメッセージのどちらか一方でかまいません (両方書いていただけるとよりうれしいです)。お気軽にご利用ください (感想・どんな用途で使用したかなどをいただけると作成・運営の励みになります!)


このページはお役に立ちましたか?