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!

More info needed. What browser is this happening on ? Does it happen all the time ? On load ? Can you group your checkboxes to a family and apply this class to the family and see ? — happybuddha
– happybuddha, Commented Mar 26, 2013 at 0:44
Let me put that in a jsfiddle for you. I am not seeing the problem. — meustrus
– meustrus, Commented Mar 26, 2013 at 0:47
This is happening on Chrome and Firefox, but works on IE. It is executed when the DOM is fully loaded. There is only one checkbox I need this to be applied on, and I tried giving the class in the CSS and it did not work. — LPB
– LPB, Commented Mar 26, 2013 at 0:51

Daniel Imms · Accepted Answer · 2013-03-26 00:56:09Z

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.

enter image description here

edited Mar 26, 2013 at 0:56

answered Mar 26, 2013 at 0:49

Daniel Imms

50.6k19 gold badges157 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LPB Over a year ago

Here is a fiddle that could be useful: jsfiddle.net/F9wyh/1 As you see the checkbox has no styling applied, that's what it does on my code

Roko C. Buljan · Accepted Answer · 2013-03-26 01:05:11Z

1

LIVE DEMO

$(':text, :password, :submit, select, :checkbox').addClass("idleField");

answered Mar 26, 2013 at 1:05

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Collectives™ on Stack Overflow

jQuery .addclass on a checkbox

2 Answers 2

Update

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Update

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related