2

I have problems with jQuery in IE8 (Firefox, Chrome and IE 9 all perfect). I use jQuery 1.7.1 and JS html5shiv when less than IE 9

The problem with this code is a checkbox. In IE 8 does nothing, no marks or uncheck the options.

    <div class="easy-select-box checklist category">
                    <a href="#">All Categories</a>
                    <ul>
                                <li><label><input type="checkbox" onchange="filter();" id="all" value="00"/> All Categories</label></li>
                                <li><label><input type="checkbox" name="cat[]" value="1" id="1" onchange="filter();"/> 1 category</label></li>
                                <li><label><input type="checkbox" name="cat[]" value="2" id="2" onchange="filter();"/> 2 Category</label></li>
                                <li><label><input type="checkbox" name="cat[]" value="3" id="3" onchange="filter();"/> 3 Category</label></li>
                                <li><label><input type="checkbox" name="cat[]" value="4" id="4" onchange="filter();"/> 4 Category</label></li>
                    </ul>
                </div>

jQuery('.checklist li label').click(function(){

if(jQuery(this).parent().is(':first-child')){

        if(jQuery(this).children('input').is(':checked')){

            jQuery('.checklist li').addClass('check');
            jQuery('.checklist > a').text(jQuery(this).text());
            jQuery('.checklist input').attr('checked', true);
        } else {
            jQuery('.checklist > a').text("Select Categories");
            jQuery('.checklist li').removeClass('check');
            //jQuery('.checklist input').attr('checked', false);
            jQuery('.checklist input').removeAttr('checked');
        }

    }else{      

        if(jQuery(this).children('input').is(':checked')){

            jQuery(this).parent().addClass('check');
        } else {
            jQuery('.checklist > a').append("a");
            jQuery(this).parent().removeClass('check');
            jQuery('.checklist li:first-child').removeClass('check');
            //jQuery('.checklist li:first-child input').attr('checked', false);
            jQuery('.checklist li:first-child input').removeAttr('checked');
        }   
    }
});
Kjuly
  • 34,476
  • 22
  • 104
  • 118
Mario
  • 21
  • 1
  • 3
  • Welcome to SO. See: http://ejohn.org/blog/jquery-16-and-attr/, suggesting `$.prop()` is more appropriate. Note, I remember there being a problem with the way IE handles checkboxes, but at the moment I can't remember what that is. There are several other questions on it, though. – Jared Farrish Oct 21 '12 at 16:32
  • And from the comment below [this answer](http://stackoverflow.com/a/6170016/451969): *"Note: Do not use `removeProp()` to remove native properties such as checked, disabled, or selected. This will remove the property completely and, once removed, cannot be added again to element. Use `.prop()` to set these properties to false instead." `removeProp` is really intended for use with custom properties only.* **So you should *not* be removing `checked` anyhow, set it to `false` instead**. – Jared Farrish Oct 21 '12 at 16:34
  • possible duplicate of [.prop('checked',false) or .removeAttr('checked')?](http://stackoverflow.com/questions/6169826/propchecked-false-or-removeattrchecked) – Jared Farrish Oct 21 '12 at 16:36
  • removeAttr () was only to test, with attr ('checked', false) works well. The problem is that in IE8 the checkbox does nothing, no classes apply (addClass ();) either. – Mario Oct 21 '12 at 16:55

0 Answers0