addClass not working in Internet Explorer 8 and below

Question

My code

$(document).ready(function(){ 

      $(".CheckBoxClass").change(function(){
        if($(this).is(":checked")){
            $(this).next("label").addClass("LabelSelected");
        }else{
            $(this).next("label").removeClass("LabelSelected");
        }
    });
});

This is my css

.CheckBoxClass{
    display: none;
}
.CheckBoxLabelClass{
    background:  url('/public/images/chk_off.png') no-repeat;
    padding-left: 24px;   
    margin: 5px;
    height: 22px;   
    width: 150px;
    display: block;
}
.CheckBoxLabelClass:hover{

}
.LabelSelected{
    background: url('/public/images/chk_on.png') no-repeat;
}

I've googled everything I could think of. All the solutions are not working. I've tried rewriting the code using id selectors instead and no next functions, etc. None of it is working. I'm not sure what is going on. Thanks.

Have you inserted `console.log()` or `alert()` statements to ensure that the `.is(":checked"))` function is evaluating correctly? Is IE even getting to the right code block? — George Cummins, Jun 21 '11 at 14:25
Does the `label` element directly come after the `.CheckBoxClass` element? Does it work in other browers? I suspect a problem with the HTML and misunderstanding of how `next` works. Btw. `if(this.checked)` is a faster way... — Felix Kling, Jun 21 '11 at 14:27
Could you paste your code. Also, are you sure .addClass is not working or you just can't see the style of that class?. With F12 you start developer tools and you can inspect your element to see if it has the class. — Diego, Jun 21 '11 at 14:29
According to my alert statements nothing is getting fired in IE8 in my project, although jsfiddle is working for me. — Drew H, Jun 21 '11 at 15:06
Here is the problem I think. .CheckBoxClass{ display: none; } If I take the display:none out it works but it shows my check box which I don't want to . — Drew H, Jun 21 '11 at 15:12
Can you verify that jquery is being loaded and used correctly? There is a fairly long list of answer for [Problem with jQuery in Internet Explorer 8](http://stackoverflow.com/questions/879137/problem-with-jquery-in-internet-explorer-8) that could be related to your problem. — RHSeeger, Jun 21 '11 at 14:29

Pablo · Answer 1 · 2012-11-05T15:06:28.927

If you want to add only one class, you try to add this class as following:

$(this).next("label").attr("class","LabelSelected");

A better solution, that works even with several classes:

$("someselector").attr("class",$("someselector").attr("class")+" "+"someclass");

in this example, I add the class "someclass" to "someselector". This works in IE8.

In your case, you should do:

$(this).next("label").attr("class",$(this).next("label").attr("class")+" "+"someclass");

score 0 · Answer 2 · answered May 31 '17 at 10:04

You have to wrap everything before the add/removeClass method with $([selector]). In this way all Jquery methods are loaded to be used. This is tested on IE8

$(document).ready(function(){ 

  $(".CheckBoxClass").change(function(){
    if($(this).is(":checked")){
        $($(this).next("label")).addClass("LabelSelected");
    }else{
        $($(this).next("label")).removeClass("LabelSelected");
    }
  });
});

score 0 · Accepted Answer · answered Jun 21 '11 at 14:36

0

Live test

Code works for me in IE9 with IE8 standards, IE9 with IE7 standards and IE9 quirks mode.

answered Jun 21 '11 at 14:36

Raynos

166,823
56
351
396

1

I noticed you took the display:none out of the class. I took this out and it worked. But this renders the check box which I don't want to do. – Drew H Jun 21 '11 at 15:12
2

-1 - IE9 is not IE8, even if it is in standards mode. – Andrew Apr 24 '14 at 02:49

score 0 · Answer 4 · answered Apr 01 '12 at 02:53

I use this one which works fine in IE 8 also

//Remove and add class in one statement
$("#tabName li").removeClass('ui-corner-top').addClass('ui-corner-left');

//add multiple class in one statement
$("#tabName").addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");

score -1 · Answer 5 · answered Jun 01 '12 at 13:06

-1

In CSS:

.checkbox{
   width:0px;
   height:0px;
   border:0;
}

Checkboxes are gone, and working in every browser?

answered Jun 01 '12 at 13:06

Mark

1

addClass not working in Internet Explorer 8 and below

5 Answers5