I sometimes find the need to dynamically enable or disable form elements especially since I often use ASP.NET webforms. For this purpose I find that the default HTML attributes are not sufficient.
Specifically, the HTML DISABLED and READONLY element attributes do not work as one would want a disabled form field to actually work. In my opinion if a field is disabled it should not be editable, but it should post back when the form is submitted.
So just to sum up the problem: if you write a Web form with code that receives and handles the form data when it is posted, then you are looking for certain form fields to be sent to you.
To disable a field from being edited by the user you can choose one of two methods:
1) You can tag it with the DISABLED attribute. This sounds more promising than it actually is. The side effect of this attribute is that the form field is just never sent with the post, which can cause a lot of headache with code especially if you are dynamically disabling/enabling fields per user input.
2) You can tag it with the READONLY attribute. This attribute is also a big letdown. If you choose to tag a form field with the READONLY attribute then it will be sent with the post (which is good), but the field is fully editable by the user (very not so good)!
In my opinion both the DISABLED and READONLY tags end up being pretty useless so I am happy to report that a third option exists.
In my day-to-day coding I resort to JavaScript to disable form fields so that they behave the way I think disabled fields should. Specifically I want to ensure they are not editable, are sent with the form post, and appear grayed out to the user.
To do this with text boxes I add the JavaScript event onClick and set the action to this.blur(); (ie: onClick=’this.blur();’). Then I simply set the CSS background-color to #CCCCCC (ie: style=”background-color:#CCCCCC”) and I have a nicely functioning form field.
To similarly disable select lists I also add some JavaScript and CSS. Specifically I add the JavaScript event onMouseDown and set the action to this.blur(); (ie: onMouseDown=’this.blur();’). Then just like with the text boxes I set the set the CSS background-color to #CCCCCC and voila the select list is also nicely disabled! (Please note: the list will still show the drop down options when clicked, but the use will not be able to select or change the options)
Checkboxes require a slightly different approach, but not significantly so. To disable a checkbox I simply use the JavaScript onClick event and set the action to return false. In practice the code looks like this: onClick=”return false;”. This works quite nicely to disable the checkbox, but when it comes to the CSS one cannot actually set the checkbox to appear inactive. So what I end up doing is to set the background-color to the standard gray #CCCCCC, which makes the space surrounding the checkbox gray. This tends to be a good enough indication to most users that the checkbox cannot be edited.
I hope this has been helpful information. Often I will find myself under the gun trying to deliver for a tight deadline, and the last thing I want to be worrying about is how to properly disable form elements!
Justin Cooney 