jQueryでinputの値を設定するならattrよりpropを使っといた方が良い！
どうもpei(@pei_babo)です。
先日AjaxやjQUeryで画面をガチャガチャ非同期で動かす的なことをしていた時のことです。
ひと通り開発も終わりテストで画面をいじっていたら、何故か途中からAjaxで取得してきた値がラジオボタンに反映されなくなる…という事象が発生しました。
chromeのデベロッパーツールで見たところ、ソース上はちゃんとチェックが付いて欲しいラジオボタンに「checked」が入っているのにも関わらず、画面上ではチェックが付いていない…
photo by:Martin Fisch
「どういうこっちゃ…」
プログラミングやWordPressを習得するのに一番近道な方法とは？
目次
attrでは画面上でチェックが付かない時がある
上記ページを拝見すると、attr「別のname属性の値のラジオボタンにチェックをしてから、もとのラジオボタンにチェックをするとチェックの描画がされない」とありました。
ラジオボタンは一つだったのですが、複数モーダルを立ち上げたり、FORMもjQueryでガチャガチャいじったりしていたので、attrで描画されないタイミングが出来てしまったのかも知れません。
またHTMLには「checked」とあるのに描画されないと書いているので、状況的に近しいかなと思い、propに変更してみました。
すると、、、
photo by:Britt Selvitelle
「チェックがちゃんと付くようになった！」
prop()とattr()との違いとは？
こちらのページが詳しく違いに関してまとめて頂いてます。
ありがとうございます！非常に参考になりました！
まとめ
attrでのinputの取得や設定などで困ったときはまずはpropで試してみると良いかもですね。
というかinput系はpropの方が良さそうです。
