jQueryでradioボタンを動的に作るときに、コードの書き方によってはIE6とIE7で動かなくなる場合があったのでメモ。

問題のコード

var radio = $('<input type="radio" value="1" />')
                .attr('name', 'is_public_'+num)
                .attr('id', 'is_public_'+num);

問題のコードは attr() を使って name と id をセットしようとしていました。FirefoxやSafari、IE8、IE9では問題なく動作しますが、IE6とIE7ではradioボタンが切り替わってくれません。

解決法

どうやらIE6とIE7では、attr()を使ってnameを後付けするとうまくradioボタンのグループが作れないみたいです。なので、

var radio = $('<input type="radio" value="1" name="is_public_'+num+'" />')
                .attr('id', 'is_public_'+num);

このようにjQueryオブジェクトを作成する$()の引数に最初から name を与えておかないといけないらしいです。

labelと組み合わせる場合

上記のコードでは id を attr() で後付けしていますが、これだと label タグの for と組み合わせる際に、やはり IE6 と IE7 で動作しません。(ラベルのクリックでradioボタンが切り替わってくれない。)なので、

var radio = $('<input type="radio" value="1" name="is_public_'+num+'" id="is_public_'+num+'" />');
var label = $('<label></label>').attr('for', 'is_public_'+num);

このように id もjQueryオブジェクトを生成する際に最初から与えておく必要があります。labelタグのfor属性はattr()で後付けして構いません。

ホントは$()の引数が長いので最初のように書きたいのですが。。

var str = [
    '<input type="radio" value="1" name="is_public_',
    num,
    '" id="is_public_',
    num,
    '" />'
].join('');

文字列が長くなる時はよくこんな風に書きますが、視認性ではどっちもどっちか。

なお今回の問題解決には以下のサイトを参考にしました。

» Programming Solution: IE6-IE7 Radio Button JQuery Problem: Selection does not work

• 
• ツイートで共有

著者について

F.Ko-Ji

Webエンジニアやってます。最近は ドットインストール の開発がお仕事です。その傍ら、個人で Meity や 電車遅延なう、梅酒.in、 #グラドル自画撮り部 の部室といったネットサービスを開発・運営してます。梅酒と草野球とリアル脱出ゲームが好きです。

» 詳しいプロフィールや運営サービスの一覧など