How to apply css on checkbox when it's getting disabled?

Question

I have two chech Boxes (one of them disabled). I have replaced the check boxes with a div with background color with toggle function so that checked = green, unchecked = red.

HTML

<input type="checkbox" class="input_class_checkbox" disabled="disabled">    
<br/>
<input type="checkbox" class="input_class_checkbox">

JQUERY

$('.input_class_checkbox').each(function(){
$(this).hide().after('<div class="class_checkbox" />');

});

$('.class_checkbox').on('click',function(){
$(this).toggleClass('checked').prev().prop('checked',$(this).is('.checked'))
});

CSS

.class_checkbox {
width: 20px;  
height: 20px;
background-color: red;
}

.class_checkbox.checked {
  background-color: green;
}

 .class_checkbox.disabled {
  background-color: blue;
}

How do I apply this .disabled CSS on the disabled check box on page load? also check boxes can be disabled programmatically, so can I implement onDisabled kind of Jquery code to change the appearance when a check box is disabled?

You're kind of overthinking it. Just toggle between two classes. Something like "checkbox_enabled" and "checkbox_disabled," rather than try to coax an HTML attribute into doing something it wasn't exactly designed to do. — Raydot
– Raydot, Commented May 22, 2015 at 10:34
just select all things that are classed so $('.disabled').css( .... — thatOneGuy
– thatOneGuy, Commented May 22, 2015 at 10:34
@thisOneGuy except the OP hasn't really created a disabled class. He's trying to hang this functionality off the disabled HTML attribute. — Raydot
– Raydot, Commented May 22, 2015 at 10:36
And for a more practical JQ code example, maybe something like: — Raydot
– Raydot, Commented May 22, 2015 at 10:37
BuggyCoder, do you have two states here, or three? Looks like you're going for red, green, and blue. — Raydot
– Raydot, Commented May 22, 2015 at 10:44

ketan · Accepted Answer · 2015-05-22 10:42:00Z

3

I think you want something like:

$( "input:disabled" ).next().css( "background-color", "yellow" );

Check Fiddle

answered May 22, 2015 at 10:42

ketan

19.4k42 gold badges68 silver badges107 bronze badges

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

Comments

SW4 · Accepted Answer · 2015-05-22 11:04:50Z

1

Dont use Javascript*

You should ideally look to use HTML and CSS for this, without reliance on Javascript. This ensures correct separation of concerns (HTML = content, CSS = styling, JS = functionality). It is also a cleaner more performant solution.

input+span {
  height: 10px;
  width: 10px;
  display: inline-block;
  border: 1px solid;
}
input {
  display: none;
}
input:checked +span {
  background: lightgreen;
}
input:disabled + span {
  background: lightgrey;
}

<label>
  <input type="checkbox" />
  <span></span>
</label>

<label>
  <input type="checkbox" disabled />
  <span></span>
</label>

*Unless unavoidable

answered May 22, 2015 at 11:04

SW4

71.5k20 gold badges137 silver badges140 bronze badges

Comments

Fernando Garcia · Accepted Answer · 2015-05-22 10:42:09Z

0

You need to write :disabled

Something like:

 .input_class_checkbox:disabled {
  background-color: blue;
}

answered May 22, 2015 at 10:42

Fernando Garcia

1,9992 gold badges13 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to apply css on checkbox when it's getting disabled?

3 Answers 3

Comments

Dont use Javascript*

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Dont use Javascript*

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related