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?

use javscript encoding(read prefix '\' before all javascript identifiers/syntax) — MozenRath, Feb 13 '12 at 19:47
Just tried it in IE. What isn't working for you? http://jsfiddle.net/GRstu/ — Daniel Moses, Feb 13 '12 at 19:48
jQuery claims that it is Cross browser (IE6+) so maybe the problem is in your code. — Derek 朕會功夫, Feb 13 '12 at 19:51
@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. — Murphy1976, Feb 13 '12 at 20:11
@Derek - obviously the problem is with my code, or it would be working — Murphy1976, Feb 13 '12 at 20:12
@Murphy1976 I am using IE8 and clicking on the top row of radio turns the background red. Updated jsfiddle to color both rows. http://jsfiddle.net/GRstu/1/ IE version: 8.0.7601.17514 (almost no setting changes from default) — Daniel Moses, Feb 13 '12 at 20:16
@DMoses - I think I broked it. http://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) — Murphy1976, Feb 13 '12 at 20:45
This is a duplicate question: http://stackoverflow.com/questions/3072522/labels-and-hidden-fields-in-internet-explorer-and-jquery — Daniel Moses, Feb 13 '12 at 20:53

score 4 · Accepted Answer · edited May 23 '17 at 12:15

4

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)

edited May 23 '17 at 12:15

Community

1
1

answered Feb 13 '12 at 21:09

Daniel Moses

5,872
26
39

SWEET MAMA JAMMA. Kudos to you, fine sir or ma'am, I don't know, you just have an Identicon for your avatar. – Murphy1976 Feb 13 '12 at 22:35
1

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? – Murphy1976 Feb 14 '12 at 00:31
Can you reproduce the problem in the jsfiddle? It's much easier to debug there. – Daniel Moses Feb 15 '12 at 22:37
DMoses... sorry for the delay, I was able to get it to work. It was a problem with my CSS – Murphy1976 Feb 24 '12 at 14:37

score 0 · Answer 2 · answered Feb 13 '12 at 19:47

0

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.

answered Feb 13 '12 at 19:47

jrummell

42,637
17
112
171

OK... the – Murphy1976 Feb 13 '12 at 20:07

Custom Radio Buttons - broken in IE

2 Answers2

Linked