Aspdotnet-Suresh

aspdotnet-suresh offers C#.net articles and tutorials,csharp dot net,asp.net articles and tutorials,VB.NET Articles,Gridview articles,code examples of asp.net 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Enable or Disable Textbox Controls on WebPage in Asp.net

Oct 4, 2012
Introduction

Here I will explain how to enable or disable textboxes on a page focus using
JQuery in asp.net.

Description:
  
In previous articles I explained Enable/Disable all controls on webpage, enable/disable particular controls on page using
JQuery in asp.net and another article Enable/disable button using JavaScript and many articles relating to JQuery and JavaScript. Now I will explain how to enable or disable textboxes on a page focus using JQuery in asp.net.

To implement this one we need to write code as shown below in your aspx page


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Disable or Enable textbox Controls on a Page</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#btnEnableDisable").toggle(function() {
$("input:text").attr("disabled", "disabled");
$(this).attr("disabled", "");
}, function() {
$("input:text").attr("disabled", "");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td><b>Name:</b></td>
<td><asp:TextBox ID="txtName" runat="server"/></td>
</tr>
<tr>
<td><b>First name:</b></td>
<td><asp:TextBox ID="txtfname" runat="server"/></td>
</tr>
<tr>
<td><b>Last name: </b></td>
<td><asp:TextBox ID="txtlname" runat="server"/></td>
</tr>
<tr>
<td><b>Location: </b></td>
<td><asp:TextBox ID="txtlocation" runat="server"/></td>
</tr>
<tr>
<td></td>
<td><asp:Button ID="btnEnableDisable" runat="server" Text="Enable/Disable" /></td>
</tr>
</table>
</form>
</body>
</html>

If you observe above code in header section I added script file link by using that file we have a chance to interact with JQuery and in the script we have btnEnableDisable button toggle function like

<script type="text/javascript">
$(document).ready(function() {
$("#btnEnableDisable").toggle(function() {
$("input:text").attr("disabled", "disabled");
$(this).attr("disabled", "");
}, function() {
$("input:text").attr("disabled", "");
});
});
</script>
Here whenever we click on button it will disable or enable all textbox controls on page

Demo

If you want to enable or disable particular controls check this article Enable/Disable particular controls on page using jQuery

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email

1 comments :

Anonymous said...

nice..

Give your Valuable Comments

Note: Only a member of this blog may post a comment.

© 2015 Aspdotnet-Suresh.com. All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.