Difference between disabled and read only attributes

• When disabled is applied to an element, it becomes unusable and graphically communicates its unavailability.
• Users are unable to interact with the element, which means they are unable to update its content, choose options, or submit the form.
• Disabled items do not appear in the form data sent to the server.
• Disabled elements are generally greyed out and have a distinct cursor style, indicating their inactive condition.

Example of Disabled Attribute

<asp:TextBox ID="TextBox1" runat="server" Text="Mohan Kumar" disabled="disabled" />

Read Only Attribute

• When an element is set to readonly, users are unable to edit its content, but it can still be accessed and seen.
• Users may still view the value of the element, zoom in on it, and interact with other form elements.
• Readonly elements, unlike disabled elements, are included in form data transmitted to the server.
• Readonly elements appear normal, with no visual signals suggesting their non-editable nature.

Example

<asp:TextBox ID="TextBox2" runat="server" Text="Mohan Kumar" readonly="true" />

TextBox2 is read-only in this case. The text "Mohan Kumar" can be read but not edited by users. The form, on the other hand, will submit the value "Mohan Kumar" together with other form input.

Note

1. We can’t set readonly attributes 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 change the value of ReadOnly Textbox with the help of javascript or jQuery then on the server side you will get the oldest value, not the changed value. To get the changed value from ReadOnly TextBox, make the TextBox Read-Only from code-behind by adding a readonly attribute to TextBox like as txtReadonly.Attributes.Add("readonly", "readonly");

Set Disabled Attribute

 <asp:TextBox ID="txtDisabled" Enabled="false" runat="server"></asp:TextBox> 

<input name="txtDisabled" type="text" id="txtDisabled" disabled="disabled"/> 

With the disabled attribute, both ASP.NET TextBox and HTML Input components generate a text input field that users cannot modify. They have the same functionality and ID, but the ASP.NET TextBox runs on the server, while the HTML Input runs on the client.

Set Read Only Attribute

 <asp:TextBox ID="txtReadonly" ReadOnly="true" runat="server"></asp:TextBox> 

<input name="txtReadonly" type="text" id="txtReadonly" readonly="readonly"/> 

This code sample represents an ASP.NET TextBox control and its HTML input element equivalent. Both components perform the same function: they generate a text box into which users cannot enter text due to the "readonly" property.

CSS For read-only and disabled attribute input element

Since some browsers don’t provide a default style for disabled elements. Hence to display disabled elements on all browsers with the same look and feel, we can use the below CSS.

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

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

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

Summary

"Disabled" controls in ASP.NET are inactive and non-interactive, whereas "read-only" controls are visible but not editable. Use "disabled" to hide functionality and "read-only" to display information but prevent editing. Choose the appropriate property based on your requirements. To delve more into the concepts of ASP.NET, consider enrolling in our step by step guide ASP.NET Certification Course.