attrでcheckedが動かせない!?

こんばんは、有村です!
また期間…が……ま、まあゆっくりペースで更新ってことで!!

本日のテーマは、「attrでcheckedが動かせない!?」です!
jQuery使う方であれば、attrは属性をいじいじするのに馴染み深いメソッドですよね…。
であるからこそ、謎の挙動に翻弄された事件があったのです。

チェックボックスをオンにするという、いたって単純な挙動です。
「prop使えや」というネタバレは置いておいて……だいぶ昔に実装されたコードだったので、こういうやり方もアリだったんですね。
普通に動いていたんです。

それが、別のjQueryのバージョン(1.11.X でしたかね…)で↑を使ったところ……う、動かない〜〜〜!?

同じ使い方、同じHTML構造なのに、なんでだろう!?となりました。
サイトの都合で異なるjQueryバージョンが混在しており、どちらのバージョンでも使用するものなので、困りました…。

そこで調べてみたところ、jQueryのあるバージョン(他の方の記事だと1.9以降…?)を起点に、attrにおけるcheckedの挙動が変わったみたいですね…。

それまでは、「checkedを属性かつプロパティとして設定する」だったものが、
「checkedという属性をつけようとする(しかも実際には動かない)」
に変わったようです。

…でふと浮かんだのは、
プロパティってなんなのさ?
という疑問。

調べてみたら、プロパティ == 属性、だという。
じゃあ何故、attrとpropが存在するのでしょうか…

自分なりに噛み砕くと、どうやら
属性 → HTMLに現れている属性
プロパティ → JavaScriptとして扱う属性
と、微妙な違いがあるそうで…
ん〜、表に見えるものと、表には出ないけどその実態、みたいな感じでしょうか?

「チェックされている状態」と言われたら、確かに見た目だけ「チェックしたでー!」となっても、
実態が「いやいや、見た目だけで結局は未チェックやねん…」となっていたら、意味がないですよね。

かつてのjQueryはそこらへんを上手く補ってくれていたけれど、属性は属性、プロパティはプロパティで分けようや、と方針が変わったんでしょうね。
使う側としては混乱しますが、そう考えると納得のアップデートです。

…というわけで…冒頭で述べた問題については、propを使用することで、旧・新バージョンどちらでも動くようになりました!!

バージョン毎の違いって難しいですね〜…でもいい気付きになりました!
それでは、きょうはこのへんで。