In CSS , How can I filter span element depending on dynamic property?-CodePudding

I use span elements like button and I disable and enable it depending on bussnies condition using old JS code like this:

document.getElementById('lblChecks').disabled = false/true

in HTML

<span id="lblChecks" disabled="disabled"  onclick="ChecksPoPuP();" style="display:inline-block;color:White;height:19px;width:132px;cursor: hand;">Cheques</span>

In CSS I use .GridHeader[disabled="disabled"] but it doesn't work on chrome, but it works fine on IE.

So how can I filter (.disabled) as dynamic property in CSS

Note: the problem can be solved easily using addClass and removeClass in JQuery but I have a lot of files and its hard to replace all of them

CodePudding user response：

You can define a common class name for all the elements which is disabled/enabled back and forth, and use CSS to style it.

For example:

.att-disabled:disabled{ // style goes here }

Refer more: https://developer.mozilla.org/en-US/docs/Web/CSS/:disabled

CodePudding user response：

DOM properties and HTML attributes are different things. When the browser parses the HTML source, it will set the DOM properties according to the HTML attributes in the source.

The inverse is not guaranteed: When you set the .disabled property on an element, this is not necessarily reflected back into HTML attributes. But the CSS attribute syntax [attribute=value] only looks at the HTML attributes. The browser might do that, but it does not have to - especially since there are way more DOM properties than HTML attributes anyway.

So to set something that is detectable by CSS, set an actual HTML attribute:

document.getElementById('lblChecks').setAttribute("disabled", "disabled");

now

document.querySelector("#lblChecks[disabled=disabled]");

works.

For commonly used attributes that affect how elements work, there are pseudo-clasess in CSS. :disabled is one of the defined pseudo-classes, it will work for both the HTML attribute and the DOM property.

Also take into account that not all elements legally allow all attributes/properties. The <label> element for example does not support disabled. There is no reliable behavior in such a case. You're better off using CSS classes here.