jQueryのattrを使ってラジオボタンにチェックを付けようとしたらうまく動かないときの対処法

こんにちは。
jQueryを使って特定の要素をクリックしたときにラジオボタンにチェックを入れるようなものを作っていたのですが、
一度目はチェックされるのですが、同じ要素を再度クリックした場合、チェックされないという現象が起こったので、その原因と対処法を備忘録で残します。

使ったjQueryのバージョンは1.9.1です。

問題となったコード

  • javascript
  $('#hoge li.value_box_middle').click(function(){
    $('input[name=area_id]', $(this)).attr('checked', 'checked');
  });
  • html
<ul id="hoge">
 <li class="value_box_middle area_1">
    <input id="area_id_1" name="area_id" type="radio" value="1" /><span>銀座・新橋・有楽町</span>
  </li>
  <li class="value_box_middle area_2">
    <input id="area_id_2" name="area_id" type="radio" value="2" /><span>東京・日本橋</span>
  </li>
  ・
 ・
 ・
</ul>

gazou

上記の書き方は属性にcheckedをつける用途で使う分には問題ないのですが、チェックボックスにチェックを入れたい場合やラジオボタンにチェックを入れたい場合は期待した動作になりません。

解決方法

チェックボックスにチェックを入れたい場合やラジオボタンにチェックを入れたい場合は、jQuery1.6からpropメソッドが実装されたので、こちらを使いましょう。

  • javascript
  $('#hoge li.value_box_middle').click(function(){
    $('input[name=area_id]', $(this)).prop('checked', true);
  });
Ruby on RailsによるWEBシステム開発、Android/iPhoneアプリ開発、電子書籍配信のことならお任せください この記事を書いた人と働こう! Ruby on Rails の開発なら実績豊富なBPS

週刊Railsウォッチ

インフラ

BigBinary記事より

ActiveSupport探訪シリーズ