Introduction:
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.
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 Email
|
|||
1 comments :
nice..
Note: Only a member of this blog may post a comment.