ラジオボタンのチェックをattr()でチェックされない時は、prop()を使うとうまくいく【jQuery】

ラジオボタンのチェックをjQueryのattr()でチェックをさせる処理がうまくいかないときは、 prop()を使うとうまく動作しました。

ことの発端

今回のケースは、name属性の値が異なる複数のラジオボタンがあるフォームとなります。何もチェックされていない場合は、問題なくチェックがはいります。しかし、別のname属性の値のラジオボタンにチェックをしてから、もとのラジオボタンにチェックをするとチェックの描画がされないというものでした。

attr()での場合

以下のように書いていました。

$('#hoge').on('click', function(){
	$('input[type="radio"]').attr('checked', true);
})

上記のコードだと何もチェックがはいっていない場合だと動きます。上記でも述べましたが、別のname属性の値のラジオボタンにチェックをしてから、もとのラジオボタンにチェックをするとチェックの描画がされません。しかし、HTMLには、checked="checked"はありますが、チェックの描画がない状態となります。

prop()に書き換える

そこで、西畑大先生のアドバイスのもと、attr()をprop()に書き換えると、無事に動作しました。

$('#hoge').on('click', function(){
	$('input[type="radio"]').prop('checked', true);
})

prop()とattr()の違いは、あの有名なGinpen.comの以下の

というエントリーに詳しく書かれていました。

このエントリー、普通にブックマークしていて、以前にちゃんと読んだのに、いざというときにはでてこないものですね。すみません、もっとがんばります。