Difference between disabled and read only attributes

Difference between disabled and read only attributes

01 Jun 2024
Intermediate
97.7K Views
6 min read

Difference between Disabled and Read-only attributes: An Overview

Disabled and Read only attributes are both used to control user interaction with form elements but their application is different from one another. Through this ASP.NET Tutorial, we will try to understand What is Disabled Attribute?, What is Read Only Attribute?, Difference between readonly and disabled. Learn more about other core concepts with the comprehensive ASP.NET Certification Training.

Read More: Top 50 ASP.NET Core Interview Questions and Answers for 2024

Difference between disabled and read only attributes

In ASP.NET, "disabled" refers to a control that is inactive or greyed out, prohibiting user interaction. In contrast, "read-only" permits viewing but not editing. Disabled is like locking a door, whereas read-only is similar to a window—you can see inside but can't do anything.

AttributeDisabledRead-only
PurposeIt specifies that an input element is prevented from user interaction.It specifies that an input element is allowed only to be viewed and cannot be modified.
StylingThe element will be inactive or greyed out.The element will have no change in appearance.
ApplicabilityIt is used with form elements like inputs and buttons.It is applied to text-based input fields and textarea elements.
AccessibilityThe element clearly appears to be unavailable to the users.The element can be accessed by the users as in read-only state.

Read More: How can you become an ASP.NET developer

Disabled Attribute

  • 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" />
TextBox1 is disabled in this example. Users are unable to change the wording "Mohan Kumar" or submit the form.

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.

Disabled vs Readonly Attributes

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.NET TextBox
 <asp:TextBox ID="txtDisabled" Enabled="false" runat="server"></asp:TextBox> 
HTML Input
<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.NET TextBox
 <asp:TextBox ID="txtReadonly" ReadOnly="true" runat="server"></asp:TextBox> 
HTML Input
<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.

FAQs

Q1. What's the distinction between read-only and non-editable?

A readonly element is not editable, but it is transmitted when the corresponding form is submitted. A disabled element is not editable and is not transmitted when the form is submitted. Another distinction is that while disabled items cannot be focused, readonly elements may (and do so when "tabbing" across a form).

Q2. What is the difference between the text area element's random and disabled attributes?

When a textarea is disabled, the parent form ignores it. When a textarea is set to readonly, the contents of the textarea are still submitted with the form, even though the user cannot edit them. Here's how those two properties affect the appearance of a textarea.

Q3. How can I remove read-only attributes?

If this is the case, follow the steps below to manually remove the read-only attribute from that folder:
  1. Navigate to the read-only folder.
  2. Right-click it and choose Properties.
  3. Uncheck the Read-only checkbox on the General tab.
  4. Click Apply, then OK.

Q4. What is the meaning of read-only?

The meaning of read-only is that an input element can only be viewed and it can not be modified by the user in any way.

Q5. How do "disabled" and "read-only" attributes affect user interaction?

The disabled attribute makes the element unavailable to the user so it can not interacted with, and read-only attribute marks the element as read only so it can only be viewed and not modified.
Share Article
About Author
Shailendra Chauhan (Microsoft MVP, Founder & CEO at Scholarhat by DotNetTricks)

Shailendra Chauhan is the Founder and CEO at ScholarHat by DotNetTricks which is a brand when it comes to e-Learning. He provides training and consultation over an array of technologies like Cloud, .NET, Angular, React, Node, Microservices, Containers and Mobile Apps development. He has been awarded Microsoft MVP 8th time in a row (2016-2023). He has changed many lives with his writings and unique training programs. He has a number of most sought-after books to his name which has helped job aspirants in cracking tough interviews with ease.
Accept cookies & close this