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 pensate 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 remendations 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 remended 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?

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 pensate 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 remendations 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 remended 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?

• javascript
• asp
• markup

2 Answers 2

The value of the disabled property doesn't matter, it is implied http://www.w3/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 remend 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.

The disabled attribute doesn't have to have a fixed value - it used to work without ANY value (e.g. <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.