JQuery disabled selector selects all the disabled elements in the form. To select all the elements in the form, by default we use “:disabled”. But, however, we can filter the elements by prefixing the component name or type like “input:disabled”,”select:disabled”,etc. The disabled attribute selector is a boolean attribute, where “true” value indicates element is disabled and “false” value indicates element is not disabled.
Disabled attribute can be used within <input> element. We can write as disabled=”disabled” in the input element. The disabled elements will not be submitted in a form. For instance, consider a line with disabled attribute <input type=”text” name=”fname” disabled= “disabled”>. When we write disabled, it specifies that input field is disabled and can’t do any operation on that element. The disabled selector supported by some of the HTML elements such as button, select, div, option, input and textarea elements.
JQuery Disabled Selector Syntax
$(“:disabled”)
JQuery Disabled Selector Example
<!doctype html>
<head>
<title>JQuery Disabled Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Disabled Selector Example</h2>
<style>
.test
{
color:green;
}
div
{
background:lightblue;
}
</style>
<script>
$(document).ready(function(){
$("#Disable").click(function(){
$(".myexample *").prop('disabled',true);
});
$("input:disabled").css("border-color", "red");
});
</script>
<body>
<form>
Name:<input type="text" name="uname" class="test" disabled="disabled" value="This is disabled textbox"><br>
Password:<input type="password" name="pwd"><br><br>
<input type="submit" value="Submit" class="test" disabled="disabled">
</form><br><br>
<div class="myexample">
Fname:<input type="text" placeholder="First Name"/>
Lname:<input type="text" placeholder="Last Name"/>
</div>
<input type="button" id="Disable" value="Disable the Elements"/>
</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.
- $(“#Disable”).click(function()) line defines click method which occurs when element is clicked which uses id attribute of input element.
- $(“.myexample *”).prop(‘disabled’,true); line sets the disabled property to true. The true value defines that element will be disable after clicking the button element. The myexample * is the class of div element which makes all the div elements disabled by using * symbol in the web page.
- $(“input:disabled”).css(“border-color”, “red”); line defines disabled selector which selects all the elements of type disabled and uses input HTML element that support the disabled attribute.
- When we run the above script, we will get two input type elements. One with disabled and second one with enabled and the button also will get display as disabled. The disabled elements will get display with green color text and red color border as specified in the input element and CSS class test. A button will get appear on the browser, when we click on that button all the elements will get disabled which are defined under the div element.
JQuery Disabled Selector Demo
When you run the above example, you would get the following output:
It is also possible to disable the select and textarea elements by using div element. The following example shows how to disable the select and textarea elements.
<!doctype html>
<head>
<title>JQuery Disabled Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Disabled Selector Example</h2>
<style>
div
{
background:lightgray;
}
</style>
<script>
$(document).ready(function(){
$("#mydiv").find("select,textarea").prop('disabled',true);
});
</script>
<body>
<div id="mydiv">
<textarea>This is disabled</textarea><br>
<select>
<option>Item1</option>
<option>Item2</option>
<option>Item3</option>
</select>
</div>
</body>
</html>
The above scripts specifies the disable of select and textarea elements. The find() method returns descendant elements of selected elements in the set of matched elements.The prop method returns properties and values of the selected elements. When we run the script, the find method selects elements by using id of the div element and prop method defines disable property with true value.If it is true, then all elements will be disabled on the web page and if it is set to false, then all the elements will be enabled.
When you run the above example, you would get the following output:
Accessing Data with Spring Data GemFire