Should CSS update when JavaScript changes element attributes?

Question

I have some buttons, and in javascript I do some manipulation. Depending on what the user clicks, buttons will be enabled and disabled.

The logic and the enabling/disabling works well. But my css isn't updating the look of a disabled button. I think my question is, should it automatically update? Or do I need to handle that somehow?

I'm using ASP.NET MVC if that is relevant.

I simply added this to the top of my view (for testing) :

<style>
   button[disabled] {
       background: green;
   }
</style>

and a snippet of the javascript :

function changeNameEnabled(enabled) {
    document.getElementsByName("FullNameExact")[0].disabled = !enabled;
}

a sample button:

<button onclick="nameClick(this)" name="FullNameExact" style="height:20%;width:75%;top:5%;left:13%;margin-bottom:5%">FULL NAME EXACT</button>

and I can see in the browser that the button gains the disabled attribute, and is unclickable

It should update automatically. What does the HTML look like? — putvande, Aug 30 '13 at 15:14
It should update. So there is something wrong if it doesn't. — mvw, Aug 30 '13 at 15:15
try `button[disabled="disabled"]` Or maybe `button:disabled ` one of those selectors should work im sure — Breezer, Aug 30 '13 at 15:16
I've actually tried that, and `[disabled=true]` and a few others with the same result — Jonesopolis, Aug 30 '13 at 15:17
what browser are you using? not all browsers support that kind of selectors — Breezer, Aug 30 '13 at 15:19
well since you're not showing the entire code i can only assume your code doesnt properly disable the button, for example your button is calling the nameClick function and you function is named changeNameEnabled i assume there is more code to it, so either post it for further help or there isnt so much more i can tell — Breezer, Aug 30 '13 at 15:23

score 0 · Answer 1 · edited May 23 '17 at 10:25

0

Why not add a class to the button when disabling it? The CSS will automatically be applied when the class is added.

document.getElementById("MyElement").className = "MyClass";

In general, for managing the classes in javascript: Change an element's class with JavaScript

edited May 23 '17 at 10:25

Community

1
1

answered Aug 30 '13 at 15:15

Sablefoste

4,032
3
37
58

score 0 · Accepted Answer · answered Dec 06 '13 at 10:08

I found what was wrong. Have a look at this jsFiddle: http://jsfiddle.net/6jht2/1/

I made your code usable in a fiddle. What you were doing is passing an DOM element to a function by using this in an onclick attribute:

<button onclick="nameClick(this)" name="FullNameExact" style="height:20%;width:75%;top:5%;left:13%;margin-bottom:5%">FULL NAME EXACT</button>

So when the function is called, it will try to invert a DOM element. And error.

Even if you set the disabled attribute to a boolean it won't work. You will need to use toString on a boolean or any string, even 'a' or 'foo'.

And here everything works. Hope it'll help.

Tip: don't use the onclick attribute. Instead, use the DOM event handling.

score -3 · Answer 3 · answered Aug 30 '13 at 15:14

-3

button[disabled] wont work , better add some .disabled class , then it will work out.

answered Aug 30 '13 at 15:14

Vladimir

377
1
6

Should CSS update when JavaScript changes element attributes?

3 Answers3