Please enable Javascript to correctly display the contents on Dot Net Tricks!

Difference between disabled and read only attributes

  Author : Shailendra Chauhan
Updated On : 20 Jul 2012
Total Views : 41,553   
 

Sometimes, we required to display form fields in non-editable mode. We can achieve this functionality by setting read-only or disabled attribute to form fields (textbox, label, checkbox, text area). Before using both these attributes, we should understand the key differences between read only and disabled attributes.

Disabled attribute

  1. Disabled form fields or elements values don’t post to the server for processing.

  2. Disabled form fields or elements don’t get focus.

  3. Disabled form fields or elements are skipped while tab navigation.

  4. Some browsers (Like IE) provide default style (Gray out or emboss text) for disabled form fields or elements.

Read Only Attribute

  1. Read Only form fields or elements values post to the server for processing.

  2. Read Only form fields or elements get focus.

  3. Read Only form fields or elements are included while tab navigation.

  4. Some browsers do not provide default style for Read-Only form fields or elements.

Note

  1. We can’t set readonly attribute to all the form fields or elements. The <SELECT> , <OPTION> , and<BUTTON> elements do not have readonly attributes while they can have disabled attributes.

  2. In asp.net, when you changed the value of ReadOnly Textbox with the help of javascript or jquery then on server side you will get the oldest value not the changed value. To get changed value from ReadOnly TextBox, make the TextBox Read-Only from code-behind by adding readonly attribute to TextBox like as txtReadonly.Attibutes.Add("readonly","readonly");

Set Disabled Attribute

ASP.NET TextBox
 <asp:TextBox ID="txtDisabled" Enabled="false" runat="server"></asp:TextBox> 
HTML Input
<input name="txtDisabled" type="text" id="txtDisabled" disabled="disabled"/> 

Set Read Only Attribute

ASP.NET TextBox
 <asp:TextBox ID="txtReadonly" ReadOnly="true" runat="server"></asp:TextBox> 
HTML Input
<input name="txtReadonly" type="text" id="txtReadonly" readonly="readonly"/> 

CSS For read only and disabled attribute input element

Since some browser don’t provide default style for disabled element. Hence to display disabled elements on all browsers in same look and feel, we can use below css.

 input[disabled]{background-color:#F0F0F0; color:#303030;} 

Similarly we can change the look and feel of readonly element by using below css.

 input[readonly]{background-color:#F0F0F0 ;color:#303030 } 
Summary

In this article I try to expose the disabled and readonly attributes. I hope after reading this article you will be able to use this trick in your code. I would like to have feedback from my blog readers. Please post your feedback, question, or comments about this article.


YOU MIGHT LIKE
Free Interview Books
 
COMMENTS (0)
13 FEB
ASP.NET Core Development (online)

07:00 AM-09:00 AM IST( MON, WED, FRI)

Know More
25 JAN
Angular2 and Angular1 Development (online)

09:00 PM-10:30 PM IST(MON-FRI)

Know More
24 JAN
ASP.NET MVC with Angular2 Development (online)

07:00 AM-09:00 AM IST(Tuesday & Thursday)

Know More
20 JAN
NODEJS & MEAN Stack 2 Development (online)

09:00 PM-11:00 PM IST( MON, WED, FRI)

Know More
15 JAN
PPC Marketing (offline)

04:00 PM-05:300 PM

14 JAN
Xamarin Forms : Build Cross-platform Apps (offline)

05:00 PM-06:30 PM IST

10 JAN
ASP.NET MVC with AngularJS Development (online)

09:00 PM-11:00 PM IST on (TUE, THRU,SAT)

3 JAN
ASP.NET MVC with AngularJS Development (online)

07:00 AM-09:00 AM IST

31 DEC
ASP.NET MVC with AngularJS Development (offline)

09:30 AM-11:00 AM

31 DEC
Angular2 and Angular1 Development (offline)

11:00 AM-12:30 AM

26 NOV
ASP.NET MVC with AngularJS Development (offline)

03:00 PM-04:30 PM

5 NOV
ASP.NET MVC with AngularJS Development (offline)

08:00 AM-09:30 AM

4 SEP
MEAN Stack 2 Development (offline)

11:00 AM-12:30 PM.

BROWSE BY CATEGORY
 
RECENT ARTICLES
SUBSCRIBE TO LATEST NEWS
 
LIKE US ON FACEBOOK
 

Professional Speaks

+