addClass and removeClass not working in Internet Explorer

Asked 10/3, 2011 at 9:46 Answered 10/3, 2011 at 10:14

jQuery functions addClass and removeClass do not work properly when I use them to change the appearance of a checkbox in Internet Exploer (IE). However, they work fine in other browsers.

Here is sample code to illustrate my problem:

$('input:#chkbox').click(function()
    {
        //if($(this).is(":checked")){
        if($('input:#chkbox').is(":checked"))
        {
            $('input:#chkbox').next("label").addClass("etykieta_wybrana");
        }
        else
        {
            $('input:#chkbox').next("label").removeClass("etykieta_wybrana");
        }
    });

To further test this, you can run the code using jsFiddler (does not work in IE): http://jsfiddle.net/tejek/pZJMd/

Vadnee answered 10/3, 2011 at 9:46 Comment(0)

Your selector should either be $('#chkbox') if you want it to work with only one checkbox, the one with id chkbox, or it should be $('input:checkbox') if you want it to work with every checkbox.

Also, it's better to use the change event instead of the click event because the click event (theoretically) shouldn't fire if the change was made by something else than a mouse click.

Maybe try something like this:

$('input:checkbox').change(function () {
    var $this = $(this);
    if( $this.is(':checked') ) {
        $this.next('label').addClass('etykieta_wybrana');
    } else {
        $this.next('label').removeClass('etykieta_wybrana');
    }
});

See DEMO.

If it doesn't help then try to add and remove the classes manually in HTML to see if maybe the problem is not adding classes but not showing effects of adding the classes by some weird quirks mode rendering or something.

Make sure to start your HTML with something like this:

<!doctype html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1">

to be sure that you're always getting the most out of the IE rendering engine.

Strapped answered 10/3, 2011 at 10:14 Comment(1)

Thanks,Now I come to know, how to get most rendering issue fixed in IE – Agama 20/9, 2013 at 8:41

This selector input:#chkbox seems weird. Try #chkbox if you've got only one element with ID #chkbox (and this happens to be an <input /> field).

Also, you should probably cache the result of $('#chkbox'), e.g.:

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    if ($chkbox.is(":checked")) {
        $chkbox.next("label").addClass("etykieta_wybrana");
    } else {
        $chkbox.next("label").removeClass("etykieta_wybrana");
    }
});

You could even use .toggleClass() with a switch (second arg., untested):

var $chkbox = $('#chkbox');
$chkbox.click(function() {
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked"));
});

Disclaimer
No, this does not explain why it worked in Fx, Chrome etc. and not in IE. I guess the selector implementation is somewhat different between the browsers. In general, this may not even solve the problem but only hint at potential problems (and a "cleaner" solution).

Bina answered 10/3, 2011 at 9:49 Comment(1)

ALternatively, $chkbox.checked if you're certain that it is a <input type="checkbox" />, cf. Utilize the awesome power of jQuery to access properties of an element. – Bina 10/3, 2011 at 10:11

Recommended topics

Hot tags