Edit disable submit button

Question

I am trying to edit in css a disabled submit button. This button is disabled if the checkbox is not checked and enable if the checkbox is checked. I can not edit both disabled and enable button. I can not figure it out how should i do.

Check this fiddle you will understand better. input#btnsubmit[disabled] is not applyed.

Have you thought about adding a class to the element when you're disabling the element with JS? And then just style that class. — Mitchell Layzell
– Mitchell Layzell, Commented Apr 20, 2014 at 19:54
I have but i am not that good in jquery or javascript and i dont know how to really do that. — Filip
– Filip, Commented Apr 20, 2014 at 19:56
I was thinking somethig like if(this.check).addClass('butonsubmit'); — Filip
– Filip, Commented Apr 20, 2014 at 19:57
CSS overrides previous rules, so if [disabled] is the most important one, that should override all of them, it should be the last css defined. — Chiri Vulpes
– Chiri Vulpes, Commented Apr 20, 2014 at 19:59

Yaron U. · Accepted Answer · 2014-04-20 19:57:35Z

First of all - true is not a valid value for disabled attribute - it should be either disabled="disabled" (for XHTML compatibility) of just disabled without value as of HTML5

second of all - you problem happens because you set background in the base input css and background-color in the [disabled] part - the background property has precedence - and as long as it wasn't overwritten - it is still applied

use background for both and the problem is fixed

Fiddle example

Please note that the disabled selector in CSS doesn't work in IE8 or below, id recommend using a class :)
Me too :) but even with classes the issue will still happen due to the precedence issue (see jsfiddle.net/Dh79m/5)

wavemode · Accepted Answer · 2014-04-20 19:58:08Z

$("#reguli").change(function(){ $("#btnsubmit").prop("disabled",!this.checked).toggleClass('disabled-button'); });

This code will add/remove a class .disabled-button that you can style with css. This is also more widely compatible with old browsers.

Collectives™ on Stack Overflow

Edit disable submit button

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related