JavaScript disabled = true vs ASP.NET Enabled = False

Question

In my ASP.NET web application, I have some elements that may be disabled in code-behind and some elements may be disabled in JavaScript.

For the code-behind elements, I simply use the following VB.NET property:

Me.element1.Enabled = False

For the dynamic elements, I use the following JavaScript property:

document.getElementById('" & Me.element2.ClientID & "').disabled = true;

The first thing I noticed is that changing the Enabled property doesn't just add disabled="disabled" to the markup, it also changes the class from button (my skinned class name for buttons) to button aspNetDisabled . To compensate for this, I include the following additional JavaScript line:

document.getElementById('" & Me.element2.ClientID & "').className = 'button aspNetDisabled';

(Clearly, this means I need to maintain the className attribute if/when I enable the element again, and I'll need to ensure I use button / textbox /etc. as applicable - For bonus points, if you have any recommendations about this, I'd be happy to hear them)

However, I also noticed that the markup produced via JavaScript is only disabled="" , whereas the markup produced by the ASP.NET Enabled property change is disabled="disabled" .

I tried fiddling with the JavaScript to change it to:

document.getElementById('" & Me.element2.ClientID & "').disabled = 'disabled';

However, this didn't seem to make a difference, with the attribute still being empty. Interesting that disabled=true; and disabled='disabled'; seem to work in the same way - I expect one of them is more correct (I'm sticking to =true; for now).

Is there a recommended best way of achieving the same results with JavaScript as with server-side ASP.NET with regards to enabling and disabling elements?

and...

Is the difference between the rendering of disabled="disabled" and disabled="" likely to cause me any problems?

Answer 1

The value of the disabled property doesn't matter, it is implied http://www.w3.org/TR/html401/interact/forms.html#h-17.12.1

There is some strangeness going on though.

var my_elem = document.getElementById('my_elem');
elem.disabled = true;  // disabled
elem.disabled = false;  // enabled
elem.disabled = "false"; // disabled

The strange case is

elem.disabled = ""; // disabled

Normally "" is falsy (as in "" == false is true ).

I would recommend you use a framework to set these properties to catch any browser specific behavior. For disabled there isn't much strife but properties like opacity don't work the same in all browsers.

Answer 2

The disabled attribute doesn't have to have a fixed value - it used to work without ANY value (eg <input type=text disabled> ) but this caused some validation problems. If you're already using jquery in your project, you can use something like:

$('#elementname').removeAttr('disabled').removeClass('aspNetDisabled');  // Enable

and

$('#elementname').attr('disabled').addClass('aspNetDisabled');  // Disable

The difference between disabled="disabled" and disabled="true" does not matter.