Introduction
In my previous article I explained how to find the click event for Static and Dynamic Elements. This article explains how to work on .each() and concatenate some exception within the .each() function.
Sometimes we get a situation where we might need to work on all the elements of a certain type under a specific parent control or it also might be possible that we want to work on all the elements except an element at a certain position, so for those situations this article will help you.
Step 1
First of all you need to add a jQuery library to the head section of your application like this:
- <head runat="server">
- <title></title>
- <script src="jquery-1.11.0.min.js"></script>
- </head>
Step 2
Now we will create some elements within a parent div:
- <div id="divTabl">
- Disable All:
- <asp:CheckBox ID="chk" runat="server" />
-
-
- <asp:Label ID="done" ForeColor="Red" runat="server"></asp:Label>
- <br />
- Name:
- <asp:TextBox ID="hide" Style="display: none" runat="server"></asp:TextBox>
- <asp:DropDownList ID="drpEnter" runat="server">
- <asp:ListItem Text="Select" Value="Select"></asp:ListItem>
- <asp:ListItem Text="Hello" Value=" Hello "></asp:ListItem>
- <asp:ListItem Text="Where" Value=" Where "></asp:ListItem>
- </asp:DropDownList>
- <br />
- Age:
- <asp:TextBox runat="server" ID="txtAge"></asp:TextBox>
- </div>
Step 3
Now our main work is started, the jQuery work.
First of all create a script tag and within that tag write this code:
- <script>
- $(document).ready(function () {
- $('#chk').change(function () {
- var checked = $(this).prop('checked');
- $('#divTabl input, #divTabl select').each(function () {
- if ($(this).attr('id') != 'chk') {
- $(this).prop('disabled', checked);
- };
- });
- });
- });
- </script>
Here I am working on the change function of the checkbox, as the checkbox will be checked or unchecked this code will start it's work.
I am storing the checked/unchecked value of this checkbox, in other words if the checkbox is checked then it's value will be stored as true else false.
After this I am finding the input type and select type of elements under the div whose id is "divTabl", you can find the multiple elements by using comma (,) and space as the separator between elements.
Since our checkbox is also in the same parent div, we need to keep it separate otherwise it will also become disabled and this will be a deadlock. So, it is checked that if element ID is not "chk" then to proceed otherwise go to the next element. "this" always represents the current element, so it's value is always changing.
If the ID is found to be other then Checkbox ID then it's state is set to either disabled as "true" or "false" depending on the state of Checkbox. This is done by changing the property of the element similar to the Checkbox.
The output can be seen as follows.
If I click on the checkbox then all other elements will become disabled.
![each function]()
If I again click on the checkbox and make it unchecked then the elements will also become enabled.
![each function]()
Now we can move to the second situation where we don't want to apply the .each() function on certain elements or an element at a certain position, so for that we need to modify the each function as follows:
- <script>
- $(document).ready(function () {
- $('#chk').change(function () {
- var checked = $(this).prop('checked');
- $('#divTabl input, #divTabl select:not(:first)').each(function () {
- if ($(this).attr('id') != 'chk') {
- $(this).prop('disabled', checked);
- };
- });
- });
- });
- </script>
select:not(:first) will exclude the first elemet of the select type from the .each() function.
For example:
![each function]()