jQuery Validate - Remove Error Class from Parent Div

Question

I have a set of checkboxes, that when none are selected, a class is added to the parent div to make the text red. However, when a box is selected, the class should be removed. With my current code, the class remains attached to the div when a checkbox is selected.

How do I remove the class once a single checkbox is selected?

$().ready(function() {

    $('#addForm').validate({
        rules: { 
            "items": { 
                required: true, 
                minlength: 1 
            } 
        }, 
        errorPlacement: function(error, element) {
            if (element.is(':checkbox')) {
                $(element).parent("div").addClass('checkbox-error');
            }
            else {
                 return true;
            }
         }
    }); 


});

Answer 1

Bind an event listener to the checkbox, which removes the class once it's checked:

$("#addForm :checkbox").change(function(){
    if(this.checked) {
        $(this).parent("div").removeClass("checkbox-error");
    }
})

Answer 2

您可以在复选框更改事件中执行此操作。

$("yourdiv").removeClass("checkbox-error");