問題
style.css
input[type="radio"] {
display: none;
}
にして、<label>に画像を入れたいときってありますよね。
そこを選択させたらforの中身(該当のidを持つinput要素)がcheckedにされて...
っていうのがIE以外のお話です。
では、IEはどうでしょうか？
...
...
動かない！！！！！！
これは、<label>の中にある<img>のせい、
というかIE特有のバグなのですが
今回はその解決策を残したいと思います。
解決策1
こちらに書かれているとおり
CSSでimgにpointer-eventes: none;して上げればokです。
IE11未満は未対応になります。
解決策2
JS側(jQuery)で制御して解決するパターンです。
script.js
// DOM読み込み後
$(function(){
var ua = window.navigator.userAgent.toLowerCase();
var isIE = (ua.indexOf('msie') >= 0 || ua.indexOf('trident') >= 0);
$('label').click(function(){
var id = $(this).attr('for');
var $id = $('#' + id);
// ~~ 中略 ~~~
// IEの場合のみ、JSでlabelクリックのときradioボタンのinputをcheckedにさせる
if (isIE && $id.attr('type') === 'radio') $id.prop('checked', true);
});
});
とりあえず、自分はIE10,9にも念のための対応が必要だったので、このような記述で解決しました。