Custom Radio Buttons - Broken In Ie

I am using jQuery to customize some radio buttons. I have two different radio button stylings so you will see two if statements looking for those two different classes. The problem

Solution 1:

Here is the broken code from Murphy. http://jsfiddle.net/GRstu/10/

Note the CSS line in the fiddle input[type=radio]{display:none;}. That line will cause the radio button to not get checked/unchecked when the label is clicked. This is just how IE works. You will need to do a workaround to check the hidden radio when the corresponding label is clicked.

You can do that by adding a line to the click event:

$('label').click(function() {
    $(this).children("input").prop("checked", true);  //This is the keysetupLabel();
});

Here is the jsfiddle of the solution: http://jsfiddle.net/GRstu/11/

Note that this is a similar solution and problem to that brought forward in this question: Labels and hidden fields in Internet Explorer (and jquery)

Solution 2:

You could throw a <noscript> tag in your html to display a message to users with javascript turned off, but you can't enable it for them in a web page.

E.g.

<noscript> Enable javascript! </noscript>

However, since you're in a corporate environment, your System Administrator could create a Group Policy to enable Javascript in all users' Internet Explorer settings.