The jQuery :disabled selector selects all the disabled elements in a form. You can apply the CSS and other effects after selecting the disabled form element.
You can make the form element disabled by adding the attribute disabled to the element. The selector is useful when you want to highlight the disabled elements inside a form.
Syntax of the Selector
The syntax of jQuery :disabled selector is given below.
There are no arguments required for this selector to select the item. However, you can specify the element name to select only the required element. You can also specify the class name and id name to select the element.
jQuery :disabled Selector Selects Disabled Button Element
You can stop the submission of the form by making the submit button disabled. To color the submit button or apply other effects, you have to select the element using the jQuery :disabled selector. There can be more than one disabled button element. You can highlight all the disabled button element using this selector.
Below is the form that contains only a single button element. You have to select the button and highlight to easily identify it.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> $(document).ready(function(){ $( ".mydformbtndisabled :disabled" ).css("background", "yellow"); }); </script> <form action="#" class="mydformbtndisabled"> <label>Name</label> <input type="text" name="name" placeholder="Enter your name..."><br><br> <label>Email</label> <input type="email" name="email" placeholder="Enter your email..."><br><br> <input type="submit" value="Submit" name="submit" disabled> </form> |
Output
The above example contains the yellow color button element. The color of the button shows that the form button element is disabled.
Select Disabled Select Box Options Element
You have to disable the select box option to stop users select the options. However, a form can contain more than one select box. It’s difficult for you to identify the disabled select box. You can apply the CSS color to the disabled items to easily identify it.
To select the disabled select box, you have to use the below-given example.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $(document).ready(function(){ $( ".mydformselectdisabled :disabled" ).css("background", "yellow"); }); </script> <form action="#" class="mydformselectdisabled"> <label>Name</label> <input type="text" name="name" placeholder="Enter your name..."><br><br> <label>Country</label> <select name="country" disabled> <option value="India">India</option> <option value="India">Australia</option> <option value="India">USA</option> <option value="India">Germany</option> </select><br><br> <button type="button" name="submit">Submit</button> </form> |
Output
The above example showing the disabled select box options. It’s easy for you to identify it with the yellow color of the select box.
If you have any queries regarding this tutorial post, please comment below.
Also tell me, what other methods you are using with the selector by commenting below.
References