Updated April 10, 2023
Introduction to jQuery disable input
In jQuery, disable input is defined as disabling the input field or input element which means it grays out the input field for any users for entering any value and this is done using the attr() function where we disable the attribute using the “disabled” keyword along with disabled attribute specified as a parameter to the attr() function. In general, we can declare or define the disabled input as graying out the input field or input element for which this attribute is declared disabled for disabling this input element in the parameter as “disabled” for attr() function applied on any input element with its given name.
Syntax:
$(selector_name).attr('disabled', 'disabled');In the above-given syntax, the selector name which is specified is to specify the element name which is an input field name or input box element along with attr() function for disabling this input element in jQuery.
Parameters:
disabled: this is used to specify the attribute of the input to make it disable and the second parameter is optional as “disabled” is specified when we want to disable any selector tag or element for which element name is specified which is considered as an attribute for disabling or graying out that element.
Similarly, if we want to enable this disabled element then we have to use the remove() function for removing the “disabled” attribute declared in this function from this element.
How the input field or element is disabled in jQuery using attr() and prop() functions?
In jQuery, to disable the input field or element we use the attr() function for disabling or graying out the input field or input element. Firstly, in jQuery, there are two ways for disabling the input elements or input fields such as prop() and attr() functions but usually for input disabling we use only the attr() function. This attr() function is first applied to the element which is input element or input field or input box then it is followed by the dot operator along with attr() function in which there are two parameters passed to this function and both the parameters are declared as “disabled” this is done when we are disabling the matched or specified element. The second parameter is optional but when we are disabling both the parameters are must as the attribute for the given element is declared as “disabled” in the second attribute of the attr() function and if the same is used for enabling this disabled element then we have to remove the “disabled” attribute in the second parameter using removeAttr() function. Similarly, prop() also we have “disabled” attribute and here we declare true or false along with this attribute which indicated disable if the value is true and enabled is the value is false.
Now let us an example for demonstrating the input disabling using attr() function in jQuery:
Example #1
<!DOCTYPE html>
<html>
<head>
<title> Demonstration of disabling input using attr() function in jQuery </title>
<style>
.grey{
background-color:grey;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<p> Click the below button to disable and enable to edit the values. </p>
Value Entered: <input id="Int_Name" class="grey" value="Educba" disabled="disabled" />
<br>
<br>
<input type="button" id="btn" value="disable/enable" />
<script>
$(document).ready(function(){
$("#btn").click(function() {
$("#Int_Name").attr('disabled', !$("#Int_Name").attr('disabled'));
$("#Int_Name").removeClass("grey");
});
});
</script>
</body>
</html>Output:
After clicking on the button the output is shown below
After clicking on the button the output is shown below
In the above code, we can see in the body tag we are defining input element with its id and class for specifying the properties that need to be applied to this input element and then we have also defined value with value as “Educba” and then we are also using disabled as another option which is defined within the input element and its value is set to “disabled” as we are making this field as disabled which means we are first displaying it in a grey color to indicate it is grayed out as seen in the first screenshot. Then we have created another input element which is of type button and id is given as “btn” so that it becomes easy for further specifying or referring this button in the function logic and the button name is given as “disable/Enable” for disabling or enabling the input element which when clicked enable then it makes the user edit the values in the input field and if clicked again then it will be disabled the same input field which will not allow the user to edit the value. Then the same is referred to in the function logic where we are using attr() function with attributed specified as “disabled” for the input element with its given id “Int_Name”. To enable the same input element we are specifying the removeAttr() function to the same input element on the same id given for the input element. Therefore the output is as shown in the above screenshots.
Now we will see another example in which we are using the prop() function for disabling the input in jQuery but this function can be used in the version above 1.5.
Example #2
<!DOCTYPE html>
<html>
<head>
<title> Demonstration of input disable using prop() function in jQuery </title>
</head>
<body>
<p> Click the below buttons for disabling and enabling the input. <p>
Enter Your Institute name: <input type="text" id="Inst_name">
<button id="btn_disable" > Disable </button>
<button id="btn_enable" > Enable </button>
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
$("#btn_enable").click(function(){
$("#Inst_name").prop("disabled", false);
});
$("#btn_disable").click(function(){
$("#Inst_name").prop("disabled", true);
});
});
</script>
</body>
</html>Output:
After clicking on the Disable button –
In the above code, the example is similar to the previous code but in this code, we are using prop() function instead of attr() function in jQuery for disabling and enabling the input element. In this code the only difference is when we are using the prop() function which is applied on the buttons created we use true as offset value when “disabled” is another attribute of the prop() function for disabling the value in the input element which is entered by the user and in the same way we declare false for enabling the values entered in the input element. The output is shown in the above screenshots.
Conclusion
In this article, we conclude that disabling any input element or input field in jQuery is done using the attr() or prop() function and these functions are also used for disabling any form elements in jQuery other than the input field. In jQuery, the enabling of the same elements is done by removing the “disabled” attribute from the function parameter by using the remove keyword before attr() function.
Recommended Articles
This is a guide to jQuery disable input. Here we discuss the Introduction, syntax, examples with code implementation. You may also have a look at the following articles to learn more –
