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

Enable-disable selected or particular controls on a page using JQuery in asp.net

Jul 23, 2012
Introduction

Here I will explain how to enable or disable selected or particular controls on a page using JQuery in asp.net.

Description:
  
In previous articles I explained how to disable or enable all the controls on page using JQuery and many articles relating to JQuery. Now I will explain how to disable or enable only selected or particular controls on webpage 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 All 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:not(.disb),textarea,select").attr("disabled", "disabled");
$(this).attr("disabled", "");
}, function() {
$("*").attr("disabled", "");
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
First name: <asp:TextBox ID="txtfname" runat="server"/><br />
Last name: <asp:TextBox ID="txtlname" runat="server"/><br />
Password: <asp:TextBox ID="txtpwd" runat="server"/><br/>
<asp:RadioButtonList ID="rdbtn" runat="server">
<asp:ListItem Value="male" Text="Male"/>
<asp:ListItem Value="female" Text="Female"/>
</asp:RadioButtonList>
<asp:CheckBoxList ID="chkVehicle" runat="server">
<asp:ListItem Value="Bike" Text="I have a bike"/>
<asp:ListItem Value="Car" Text="I have a car"/>
</asp:CheckBoxList>
<asp:DropDownList ID="ddlBuses" runat="server">
<asp:ListItem Value="volvo" Text="Volvo" />
<asp:ListItem Value="saab" Text="Saab"/>
<asp:ListItem Value="Audi" Text="Audi"/>
<asp:ListItem Value="ford" Text="Ford"/>
</asp:DropDownList><br/>
<textarea rows="5" cols="40" > </textarea>
<br/>
<asp:Button ID="btnEnableDisable" runat="server" Text="Enable/Disable" />
</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

$(document).ready(function() {
$("#btnEnableDisable").toggle(function() {
$("input:not(.disb),textarea,select").attr("disabled", "disabled");
$(this).attr("disabled", "");
}, function() {
$("*").attr("disabled", "");
});
});
Here whenever we click on button it will disable all the input controls including textarea and dropdownlist controls and it will leave the controls which contains class name .disb because we need enable button control while disabling all the controls.

Demo

  

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

2 comments :

Anonymous said...

e werwer w

Anonymous said...

hi
some one please explain the piece of code"$("input:not(.disb),textarea,select").attr("disabled", "disabled");"

i could not find disb in body part .then how the above line work.

Give your Valuable Comments

Other Related Posts

© 2010-2012 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.