Menu
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/
946
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.
198
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).
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
