jQuery className and removeClass not working

Question

I have the following condition in a long function:

if ( shipSet == true ) {
    $("#" + shippingFields[i]).style.background = 'gray';
    $("#" + shippingFields[i]).className = 'optional';      
} else {
    $("#" + shippingFields[i]).removeAttribute('style');
    $("#" + shippingFields[i]).removeClass('optional');
}

the style lines work fine, whether true or false, but the className and removeClass lines aren't working. Any suggestions? Am I just not using them properly?

Answer 1

Since ("#" + shippingFields[i]) return a jQuery object.

You need to use addClass() and removeClass() instead:

if ( shipSet == true ) {
    $("#" + shippingFields[i]).css('background','gray');
    $("#" + shippingFields[i]).addClass('optional');      
} else {
    $("#" + shippingFields[i]).removeAttr('style');
    $("#" + shippingFields[i]).removeClass('optional');
}

Also, you can use css() to set the styles of your elements.

Answer 2

You should use addClass (to add class to element) and removeClass (to remove class from element):

$("#" + shippingFields[i]).addClass('optional');      
$("#" + shippingFields[i]).removeClass('optional');

Answer 3

if ( shipSet == true ) {
    $("#" + shippingFields[i]).css('background','gray');
    $("#" + shippingFields[i]).addClass('optional');      
} else {
    $("#" + shippingFields[i]).removeAttr('style');
    $("#" + shippingFields[i]).removeClass('optional');
}

Answer 4

Try this, for adding class name use always $("#attributeID").addClass('ClassName');

if ( shipSet == true ) {
    $("#" + shippingFields[i]).css('background','gray');
    $("#" + shippingFields[i]).addClass('optional');      
} else {
    $("#" + shippingFields[i]).removeAttr('style');
    $("#" + shippingFields[i]).removeClass('optional');
}