Enabled and Disabled Button Properties

[dday9]

I need y'all's opinion on how to tackle an issue. I have a button(<input type="button">) that I need to be enabled or disabled dependent on the value of a dropdown. One option I was thinking was to create two different classes, one for the enabled and the other for the disabled, and once the dropdown option changed I would set the class of the button equal to the enabled or disabled CSS style using JavaScript. The other option I was thinking about doing was creating two separate buttons, one for enabled and one for disabled, and showing/hiding the button when the dropdown option is changed, again using JavaScript.

I wanted to know if there was a better option than these two, perhaps an option that just uses CSS rather than JavaScript. Any suggestions are appreciated.

[kfcSmitty]

As far as I know, you can't disable a button using CSS.

Is there any reason you're not just toggling the disabled attribute of a button/input to disable/enable it?

http://www.w3schools.com/tags/att_button_disabled.asp

http://www.w3schools.com/tags/att_input_disabled.asp

[dday9]

Because I want for the button to have different styles whenever it is enabled/disabled. For example, while its enabled I want it's cursor to be Pointer and it's background color to be Green but while its disabled I want the cursor to be Default and it's background color Grey.

[tr333]

kfcSmitty is right. There is no way to "disable" or "enable" a button via CSS. You need to use JavaScript to toggle the disabled attribute of the button/input.

For the CSS, just style the appropriate enabled and disabled pseudo-classes. No adding/removing of extra class names required. Just toggle the attribute and the CSS should update automatically.

I normally prefer to use <button> elements over <input>, but that's just a personal preference. Makes no real difference in practice if you don't need the extra styling/html capabilities of <button>.

[akhileshbc]

And here's the example I made: http://jsfiddle.net/m8hqjLr9/