Introduction to jQuery Disable Button
jQuery UI disable button is used to sets or gets whether a button is disabled or not. The jQuery UI disable is a built-in property or attribute of a button in the jQuery UI library. The jQuery UI disable the property of a button allows to disable the button or to check whether the button is disable or not. The disable button is unclickable and unusable which is usually displayed by the gray color by default in the browsers. The advantage of jQuery to disable 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 returns 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 used to set a disable and an 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 disable, 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: 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 disable and enables because in the respective function of the heading the disable 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 used to check whether a button is disabled or enable, 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 –
8 Online Courses | 5 Hands-on Projects| 28+ Hours| Verifiable Certificate of Completion
4.5
View Course
Explanation: As in the above program, the button is created to check whether the button is disabled or enable, as there is a heading to display whether the button is disabled and enable, if the button is not disabled then it will display false as displaying in the above output, otherwise display false. 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 change in line <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: As in the above program the button is created to disable or enable based on the user interaction again based on the click on the heading the button gets disable and enable, here in the program the jQuery prop() method is used. In the respective function of the heading, the prop() method is set up the disabled property.
Conclusion
The jQuery UI disabled is a built-in property or attribute of a button element in the jQuery, which is used to sets or gets whether a button is disabled or enable. So using the disabled property we can allow the user to disable or enable the button.
Recommended Articles
This is a guide to jQuery Disable Button. Here we discuss a Brief Overview on jQuery Disable Button and its Examples along with its Code Implementation. You can also go through our other suggested articles to learn more –
