EDUCBA

Home Software Development Software Development Tutorials jQuery Tutorial jQuery Disable Button

jQuery Disable Button

By Afshan BanuAfshan Banu

jQuery Disable Button

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.disabled

It 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.

Start Your Free Software Development Course

Web development, programming languages, Software testing & others

buttonObj.disabled = true|false

It 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:

jQuery Disable Button Example 1a

Once we click on the heading “Click here to Disable the Button”, the button gets disable, as below in the output:

jQuery Disable Button Example 1b

And when we click on the heading “Click here to Enable the Button”, the button gets enable, as below in the output –

jQuery Disable Button Example 3

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:

jQuery Disable Button Example 2a

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 –

jQuery Disable Button Example 2b

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:

jQuery Disable Button Example 2c

And when we click on the heading “Click here to find out whether the button is disabled or not”, the output is –

jQuery Disable Button Example 2d

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:

prop() method Example 3a

 

Once we click on the heading “Click here to Disable the Button”, the button gets disabled, as below in the output –

prop() method Example 3b

And when we click on the heading “Click here to Enable the Button”, the button gets enable, as below in the output –

prop() method Example 3c

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 –

  1. Introduction to jQuery toggle()
  2. jQuery empty() (Examples)
  3. How to Use jQuery insertAfter() Method?
  4. jQuery appendTo() | Parameters | Examples
0 Shares
Share
Tweet
Share
quiz