Updated May 12, 2023
Introduction to jQuery Disable Button
jQuery UI disable button is used to sets or get whether a control is disabled or not. The jQuery UI disables a button’s built-in property or attribute in the jQuery UI library. The jQuery UI injures the property of a button and allows to disable the controller or to check whether the button is disabled or not. The disable button is unclickable and unusable, usually displayed in gray by default in the browsers. The advantage of jQuery disabling a button is it allows disabling and enabling a button based on the user interaction.
Syntax:
There are two syntaxes of jQuery UI disable button based on the purpose of the usage, they are:
buttonObj.disabledIt is used to return the disabled property. The return value of this property is Boolean. It returns true if a button is disabled, otherwise, it returns false.
buttonObj.disabled = true|falseIt is used to set the disabled property. It can have two values true or false. If its value is set to true, it will disable the button, otherwise, it is enabled if it is set to false. The default value of the disabled property is false.
Examples to Implement jQuery Disable Button
Next, we write the HTML code to understand this property more clearly with the following example, where the disable button property is used to set a disable and enable a button, as below:
Example #1
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI disable button </title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
</script>
<script>
function disable() {
document.getElementById("btn").disabled = true;
}
function enable() {
document.getElementById("btn").disabled = false;
}
</script>
</head>
<body>
<h1 onclick ="disable()"> Click here to Disable the Button </h1>
<h1 onclick ="enable()"> Click here to Enable the Button </h1><br>
<button id ="btn"> Disable or enable the Button </button>
<br><br>
</body>
</html>Output:
Once we click on the heading “Click here to Disable the Button,” the button gets disabled, as below in the output:
And when we click on the heading “Click here to Enable the Button”, the button gets enabled, as below in the output –
Explanation:
As in the above program, the button is created to disable or enable based on the user interaction, as there are two headings to disable and enable the button. So based on the click on the heading, the button gets disabled and enabled because, in the respective function of the heading, the disabled property is set.
Next, we write the HTML code to understand the jQuery disable button property more clearly with the following example, where the disable button property is used to check whether a button is disabled or enabled, as below.
Example #2
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI disable button </title>
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<scriptsrc="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<scriptsrc="http://code.jquery.com/jquery-1.10.2.js"></script>
</script>
<script>
function check() {
var res = document.getElementById("btn").disabled;
document.getElementById("disp").innerHTML = res;
}
</script>
</head>
<body>
<h1 onclick ="check()"> Click here to find out whether the button is disable or not </h1>
<button id ="btn"> Disable or enable the Button </button>
<div id="disp" style="background: red;"></div>
<br><br>
</body>
</html>Output:
Once we click on the heading “Click here to find out whether the button is disabled or not”, as it is not disabled, so the output is –
Explanation:
In the mentioned program, there is a button created to determine if it is disabled or enabled. Additionally, there is a heading element used to display the status of the button (whether it is disabled or enabled). If the button is not disabled, the heading will display “false” as shown in the output. However, if the button is disabled, the heading will display “true”. So based on the button, disable or enable it to display true or false, respectively.
In the above program to disable the button, we can do the line change <button id =”btn”> Disable or enable the Button </button> as <button id =”btn” disabled> Disable or enable the Button </button>, so the button becomes disabled, and when we run the program, the output will be:
And when we click on the heading “Click here to find out whether the button is disabled or not”, the output is –
Next, we rewrite the program 1 HTML code to understand the jQuery disable button property, where to disable and enable a button the jQuery prop() method we will use, as below:
Example #3
Code:
<!doctype html>
<html lang ="en">
<head>
<meta charset="utf-8">
<title>This is an example for jQuery UI disable button </title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function disable() {
$('#btn').prop('disabled', true);
}
function enable() {
$('#btn').prop('disabled', false);
}
</script>
</head>
<body>
<h1 onclick ="disable()"> Click here to Disable the Button </h1>
<h1 onclick ="enable()"> Click here to Enable the Button </h1><br>
<button id ="btn"> Disable or enable the Button </button>
<br><br>
</body>
</html>Output:
Once we click on the heading “Click here to Disable the Button”, the button gets disabled, as below in the output –
And when we click on the heading “Click here to Enable the Button”, the button gets enable, as below in the output –
Explanation:
A button in the aforementioned programme is designed to be active or disabled depending on user activity. Additionally, when the heading is clicked, the button toggles between being disabled and enabled. In this program, the jQuery prop() method is utilized. The disabled attribute of the button is set using the prop() method inside the corresponding code for the heading.
Conclusion
The jQuery UI disabled is a built-in property or attribute of a button element in jQuery, which is used to set or get whether a button is disabled or enabled. So using the disabled property, we can allow the user to disable or enable the button.
Recommended Articles
We hope that this EDUCBA information on “jQuery Disable Button” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
