How to remove error class using jQuery validation?

Question

I have a form that adds an error class to the parent div for a set of checkboxes using the jQuery Validate plugin. However, when the checkbox is checked, the error class is deleted, but the CSS styling remains. Any ideas what I'm doing wrong?

Example: http://jsfiddle.net/qK3SC/

HTML:

<form name="itemForm" id="itemForm" method="post">
<div id="boxes">
    <input type="checkbox" id="check1" class="require-one" value="1" /> Item #1
    <input type="checkbox" id="check2" class="require-one" value="2" /> Item #2
</div>
<div id="freetext">
    <input type="text" class="required" />
</div>
<input type="submit" />
</form>

JavaScript:

$.validator.addMethod('require-one', function(value) {
    return $('.require-one:checked').size() > 0;
}, 'Please check at least one box.');

var checkboxes = $('.require-one');
var checkbox_names = $.map(checkboxes, function(e, i) {
    return $(e).attr("name")
}).join(" ");

$("#itemForm").validate({
    groups: {
        checks: checkbox_names
    },
    errorPlacement: function(error, element) {
        if (element.is(':checkbox')) {
            $(element).parent('div').addClass('checkbox-error');

        }
        return true;
    }
});

UPDATE:

I managed to use the highlight / unhighlight methods to make the error class work for checkboxes, but now the error class for my other elements is not working (i.e. text inputs and dropdowns). See: http://jsfiddle.net/qK3SC/7/

Answer 1

.

http://jsfiddle.net/qK3SC/13/

Answer 2

?

    $("#itemForm").validate({
groups: {
    checks: checkbox_names
},
errorPlacement: function(error, element) {
    if (element.is(':checkbox')) {
        $(element).parent('div').addClass('checkbox-error');

    }
    return true;
},
 success: function(){
       $('.checkbox-error').removeClass('.checkbox-eror');
}
    });