Custom Radio Buttons - broken in IE

Question

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 I'm running into CONSTANTLY, is that the script works perfectly in EVERYTHING but Internet Explorer. The company I work for, sadly, has denoted IE8 the industry standard for all websites, so everything that goes out HAS to work with IE8.

I send to you, my code

HTML for Radio Button 1

<label class="label_radio-STD happy" for="happy3"><input id="happy3" name="q3" type="radio" value="YES"/></label>
<label class="label_radio-STD meh" for="meh3"><input id="meh3" name="q3" type="radio" value="INDIFFERENT"/></label>
<label class="label_radio-STD sad" for="sad3"><input id="sad3" name="q3" type="radio" value="NO"/></label>

HTML for Radio Button 2

<label class="label_radio" for="radio0">0<input id="radio0" name="q5" type="radio" value="0"/></label>
<label class="label_radio" for="radio1">1<input id="radio1" name="q5" type="radio" value="1"/></label>
><label class="label_radio" for="radio2">2<input id="radio2" name="q5" type="radio" value="2"/></label>

JQuery to run the whole shaz-bot

<script>
    function setupLabel() {
        if ($('.label_check input').length) {

            $('.label_check').each(function(){
                $(this).removeClass('c_on');
            });

            $('.label_check input:checked').each(function(){
                $(this).parent('label').addClass('c_on');
            });                
        };

        if ($('.label_radio input').length) {

            $('.label_radio').each(function(){
                $(this).removeClass('r_on');
            });

            $('.label_radio input:checked').each(function(){
                $(this).parent('label').addClass('r_on');
            });
        };

        if ($('.label_radio-STD input').length) {

            $('.label_radio-STD').each(function(){
                $(this).removeClass('s_on');
            });

            $('.label_radio-STD input:checked').each(function(){ 
                $(this).parent('label').addClass('s_on');
            });
        };

    };
    $(document).ready(function(){
        $('label').click(function(){
            setupLabel();
        });
        setupLabel(); 
    });
</script>

I thrown ALERTS on each IF statement, and they've come up good, I've thrown ALERTS on the EACH loops and they've come up good. I used to have a line of jQuery "$('body').addClass("has-js")" as the first line of the document.ready function, but the html body NEVER had a class of has-js. I further looked at the code, and realized I didn't need it for the code I was running. But it still bothers me that $('body').addClass("has-js") never worked.

Could it be as simple as my javascript for IE8 is turned off? If so, can I force it on for anyone who may have it turned off?

Sergias

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. – Menology

use javscript encoding(read prefix '\' before all javascript identifiers/syntax) – Tepee

Just tried it in IE. What isn't working for you? jsfiddle.net/GRstu – Bruch

jQuery claims that it is Cross browser (IE6+) so maybe the problem is in your code. – Forebrain

@Tepee - can you be a little more specific? – Sergias

@DMoses - When I click on anyo fhte radio buttons, you cannot see the "clicked" state, viewing in Developer Tools shows that the addClass and removeClass is just not firing. – Sergias

@Derek - obviously the problem is with my code, or it would be working – Sergias

read about apache commons StringUtils.escapeJavascript() – Tepee

@Sergias I am using IE8 and clicking on the top row of radio turns the background red. Updated jsfiddle to color both rows. jsfiddle.net/GRstu/1 IE version: 8.0.7601.17514 (almost no setting changes from default) – Bruch

@DMoses - I think I broked it. jsfiddle.net/GRstu/10 It works as it should in Firefox and Chrome, but it's a no-no in IE8 (running IE 8.0.60001.18702IS) – Sergias

This is a duplicate question: #3073022 – Bruch

I is now confused, what is the duplicate question? – Sergias

Answer 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 key
    setupLabel();
});

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)

Bruch

SWEET MAMA JAMMA. Kudos to you, fine sir or ma'am, I don't know, you just have an Identicon for your avatar. – Sergias

OK... I spoke too soon... I added the $(this).children("input").prop("checked", true); to my .click function for all labels, but for some reason it's only working for the label_radio, and not the label_radio-STD. Thoughts? – Sergias

Can you reproduce the problem in the jsfiddle? It's much easier to debug there. – Bruch

DMoses... sorry for the delay, I was able to get it to work. It was a problem with my CSS – Sergias

Answer 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.

Menology

OK... the <noscript> is not a factor, tried it with a few people who are reporting having the issue and none of them are seeing the "ENABLE JAVASCRIPT" message, which means javascript has already been enabled for them. These are people who think an anchor tag is a sticker you put on your boat's anchor, so I KNOW they don't know how to turn on and off their javascript in their browser. Any other suggestions? I did read somewhere that IE8 has an issue with the .click function but only if it's assigned to an img tag, which mine aren't. I'm just trying to figure this out. – Sergias