It selects all the enabled elements in the form. In general, it makes activate for doing operations on elements such as input type text elements, button element etc in the document. It is recommended that it must start with tag name, otherwise by defult it selects all the elements in the form by using defualt type “:enabled”. It is often used on the form elements. It represents the elements that are in an enabled state. Such elements have a corresponding disabled state, in which they can’t be activated or accept inputs. The enabled selector matches every element in the document. It can be used with some of HTML elements such as button, select, option, input and textarea elements.
JQuery Enabled Selector Syntax
$(“:enabled”)
It specifies enabled state which selects all the enabled elements in the document.
JQuery Enabled Selector Example
<!doctype html> <head> <title>JQuery Enabled Selector</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <h2>JQuery Enabled Selector Example</h2> <style> .myval { color:green; } </style> <script> $(document).ready(function(){ $("input:enabled").css("border-color", "orange"); }); </script> <body> <form> Name:<input type="text" name="uname" class="myval" placeholder="This is enabled textbox"><br> Password:<input type="password" name="pwd" disabled="disabled"><br><br> <input type="submit" value="Submit" class="myval"> </form> </body> </html>
- As shown in the above program, we have used the code inside $(document).ready which is an event which fires up when document is ready. It will run once the page document object model is ready for JavaScript code to execute.
- $(“input:enabled”).css(“border-color”, “orange”); line defines enabled selector which represents all the enabled elements in the document and uses input HTML element.
- When we run the above script, we will get two input type elements one with enabled and other one with disabled and enabled button. The enabled elements will display with orange color border and text with green color which uses CSS property styles.
JQuery Enabled Selector Demo
When you run the above example, you would get the following output:
It can also use enabled selector with div element as follows:
<!doctype html> <head> <title>JQuery Enabled Selector</title> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> </head> <h2>JQuery Enabled Selector Example</h2> <style> .myval { color:green; } </style> <script> $(document).ready(function(){ $("#Disable").click(function(){ $(".myval *").prop('disabled',true); }); $("#Enable").click(function(){ $(".myval *").prop('disabled',false); }); }); </script> <body> <div class="myval"> Fname:<input type="text" placeholder="First Name"/> Lname:<input type="text" placeholder="Last Name"/> </div> <input type="button" id="Disable" value="Disable the Elements"/> <input type="button" id="Enable" value="Enable the Elements"/> </body> </html>
The above script uses class of div element which sets enabled property for the input elements. The prop method returns properties and values of the selected elements. It get the value of property for the matching elements in the document. The myclass * indicates select the all elements which are defined under div element. If prop method sets true value then it disables the all elements or else if it set to false then it enables all the elements in the document.
When you run the above example, you would get the following output: