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.

Answer 1

Live test

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