|
ReadOnly ASP.NET TextBox at RunTime using jQuery
|
|
Rating: 10 user(s) have rated this article
Posted by: Suprotim Agarwal,
on 6/28/2010,
in category "jQuery and ASP.NET"
Views: this article has been read 12834 times
Abstract: In this short and simple article, we will see how to check a condition and make a TextBox readonly at runtime using jQuery.
ReadOnly ASP.NET TextBox at RunTime using jQuery
In this short and simple article, we will see how to check a condition and make a TextBox readonly at runtime using jQuery.
Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability. The code shown below has been tested on IE7, IE8, Firefox 3, Chrome 2 and Safari 4.
Let us quickly jump to the solution to check if the TextBox has some value in it and make it read-only.
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Make TextBoxes ReadOnly at RunTime</title>
<script type="text/javascript"
src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
$(function ()
{
$('input:text[value!=]').each(function ()
{
$(this).attr('readonly', true);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv">
<h2>Make TextBoxes ReadOnly at RunTime</h2><br />
<asp:TextBox ID="tb1" runat="server" Text="ReadOnlyText"/><br />
<asp:TextBox ID="tb2" runat="server" Text=""/><br />
<asp:TextBox ID="tb3" runat="server" Text=""/><br />
<asp:TextBox ID="tb4" runat="server" Text="ReadOnlyText" />
<br /><br />
Tip: 1st and 4th TextBoxes have been made read-only
and cannot be edited
</div>
</form>
</body>
</html>
This is a very common requirement that most developers face on a daily basis. While editing a form, textboxes that have text in it, should be made read-only. The code shown in the example filters the textboxes that have values in it (tb1 and tb4) and applies the ‘readonly’ attribute to them.
$('input:text[value!=]').each(function() {
$(this).attr('readonly', true);
});
When the document loads, the user is able to enter text in the second and third textboxes, but not in the first and fourth, since they are now read-only. It is that simple!