I am having an issue with hidden radio buttons that are supposed to be selected when clicking on labels. However, in IE7, the radio buttons do not seem to be selecting when clicking on the label. Any ideas why this might be happening?
jQuery('input[type="radio"]').on('change', function(){
if (jQuery(this).val()=='2') {
jQuery("#user_type_3_wrapper label").removeClass();
jQuery("#user_type_3_wrapper label i").hide();
jQuery("#user_type_2_wrapper label i").show();
jQuery("#user_type_2_wrapper label").addClass("active");
} else {
jQuery("#user_type_2_wrapper label").removeClass();
jQuery("#user_type_2_wrapper label i").hide();
jQuery("#user_type_3_wrapper label i").show();
jQuery("#user_type_3_wrapper label").addClass("active");
}
CSS
fieldset.account-type ul li input { position: absolute; left: -999999em; }
HTML
<ul>
<li class="input" id="user_type_2_wrapper">
<label>
<i class="icon icon-ok" style="display: none;"></i>
<input type="radio" value="2" name="user[role_ids][]" id="user_role_ids__2"> as a <b>Host</b><br><span>A Host is the person who wants to run events or tenders.</span>
</label>
</li>
<li class="input" id="user_type_3_wrapper">
<label>
<i class="icon icon-ok" style="display: none;"></i>
<input type="radio" value="3" name="user[role_ids][]" id="user_role_ids__3"> as a <b>Participant</b><br><span>A Participant is someone who wants to take part in an event or tender process.</span>
</label>
</li>
</ul>
Thank you for your help!