jQuery .addclass on a checkbox

Question

I'm trying to add a class to multiple elements in a form. Here is my jQuery code:

$('input[type="text"],input[type="password"],select,input[type="submit"],input[type="checkbox"]').addClass("idleField");

It does work for all except for the checkbox. Any idea why?

Note: I have also tried doing it with these syntax:

:checkbox

#myForm :checkbox

Thank you!

Answer 1

It works perfectly fine for me. Maybe you're styling your checkbox incorrectly?

jsFiddle

HTML

<input type="checkbox" /> 

CSS

.idleField {
    display:block;
    width:100px;
    height:100px;
}

JS

$(document).ready(function () {
    $('input[type="text"],input[type="password"],select,input[type="submit"],input[type="checkbox"]').addClass("idleField").addClass("idleField");
});

Update

It's working in your jsFiddle, your styles can't applying to the checkbox though. Checkboxes (and radio buttons) are determined by your operating system and can't be styled in the same manner as text boxes for example. Normally styling checkboxes or radio buttons involves hiding the original input and then creating a new div (or a label) and styling that maybe with a pseudo-element.