MIMIYAKO85_ukiwaboy20140726500

jQueryでinputの値を設定するならattrよりpropを使っといた方が良い!

 
どうもpei(@pei_babo)です。

先日AjaxやjQUeryで画面をガチャガチャ非同期で動かす的なことをしていた時のことです。
ひと通り開発も終わりテストで画面をいじっていたら、何故か途中からAjaxで取得してきた値がラジオボタンに反映されなくなる…という事象が発生しました。

chromeのデベロッパーツールで見たところ、ソース上はちゃんとチェックが付いて欲しいラジオボタンに「checked」が入っているのにも関わらず、画面上ではチェックが付いていない…

photo by:Martin Fisch
4726132269_aa71fe7a4c_z
「どういうこっちゃ…」

プログラミングやWordPressを習得するのに一番近道な方法とは?

 

attrでは画面上でチェックが付かない時がある

上記ページを拝見すると、attr「別のname属性の値のラジオボタンにチェックをしてから、もとのラジオボタンにチェックをするとチェックの描画がされない」とありました。

ラジオボタンは一つだったのですが、複数モーダルを立ち上げたり、FORMもjQueryでガチャガチャいじったりしていたので、attrで描画されないタイミングが出来てしまったのかも知れません。

またHTMLには「checked」とあるのに描画されないと書いているので、状況的に近しいかなと思い、propに変更してみました。

すると、、、
 
photo by:Britt Selvitelle
3606756730_8320015f56_z
「チェックがちゃんと付くようになった!」

 

prop()とattr()との違いとは?

こちらのページが詳しく違いに関してまとめて頂いてます。
ありがとうございます!非常に参考になりました!
 

まとめ

attrでのinputの取得や設定などで困ったときはまずはpropで試してみると良いかもですね。
というかinput系はpropの方が良さそうです。

もし良かったらフォローとか購読して頂けると嬉しいです!╭( ・ㅂ・)و ̑̑ グッ !

follow us in feedly

コメントを送る

メールアドレスが公開されることはありません。

CAPTCHA