Description:
In this article, I will explain how to
Enable Disable all controls using Jquery.
Jquery provides (*) selector which is used to select
all the elements.
Sometimes in a web application where you will need to
disable or enable all controls in particular panel or div section.
We can dynamically enable and disable all elements on a
page or particular section by setting their attributes.
In the below example program, I am going to enable and
disable all controls inside the particular section based on click event.
To enable all controls inside the particular section,
$("#DivId *").attr("disabled", false);
To disable all controls inside the particular section,
$("# DivId *").attr("disabled", true);
Example Program:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script
type="text/javascript">
$(document).ready(function () {
$("#btnEnableAll").click(function () {
$("#EnableDisableAll
*").attr("disabled", false);
return
false;
});
$("#btnDisableAll").click(function () {
$("#EnableDisableAll
*").attr("disabled", true);
return
false;
});
});
</script>
</head>
<body>
<form
id="form1"
runat="server">
<div>
<div id="EnableDisableAll">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:CheckBoxList ID="CheckBoxList1" runat="server" RepeatDirection="Horizontal"
Width="203px">
<asp:ListItem>Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:CheckBoxList>
<asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal">
<asp:ListItem Selected="True">Male</asp:ListItem>
<asp:ListItem>Female</asp:ListItem>
</asp:RadioButtonList>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>One</asp:ListItem>
<asp:ListItem>Two</asp:ListItem>
<asp:ListItem>Three</asp:ListItem>
</asp:DropDownList>
</div>
<asp:Button ID="btnEnableAll" runat="server" Text="Enable All" />
<asp:Button ID="btnDisableAll" runat="server" Text="Disable All" />
</div>
</form>
</body>
</html>
Enable Disable all controls
with Jquery , How to disable all the controls using Jquery, Enable all controls
using Jquery, Disable Enable all input using Jquery, Disable all controls on
the page, Disable Enable all controls of page, Jquery Disable Enable all input
elements
0 comments:
Post a Comment