In this blog post, you'll learn how to disable and enable buttons using both HTML and JavaScript.
Disabling Buttons with HTML:
To disabled a button using HTML, simply add the disabled attribute to the button tag.
To re-enable the button, remove the disabled attribute.
Example:
HTML
<!--Disabled button.-->
<button type="button" disabled>Button</button>
<!--Enabled button.-->
<button type="button">Button</button>
Disabling and Enabling Buttons with JavaScript:
JavaScript method:
SetAttribute().
To disable and enable button with JavaScript. We have to add and remove disabled attributes with JavaScript.
Disabling a Button with JavaScript:
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Button | maketechstuff.com</title>
</head>
<body>
<div class="box">
<button type="button" class="button">Button</button>
<p class="output"></p>
<button type="button" class="change_button">change</button>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 15px;
text-align: center;
}
button {
font-size: 30px;
padding: 10px 50px;
margin-top: 50px;
cursor: pointer;
}
.output{
font-size: 25px;
}
JavaScript
let change_button = document.querySelector(".change_button");
let button = document.querySelector(".button");
let output = document.querySelector(".output");
change_button.addEventListener("click" , disabled_button);
function disabled_button(){
button.setAttribute("disabled" , true);
output.innerHTML = "Button is disabled";
}
Output:
You can also disable button without setAttribute Method. Like this.
JavaScript
let change_button = document.querySelector(".change_button");
let button = document.querySelector(".button");
let output = document.querySelector(".output");
change_button.addEventListener("click" , disable_button);
function disable_button(){
button.disabled = true;
output.innerHTML = "Button is Disabled";
}
Enabling a Disabled Button with JavaScript:
Just remove the disabled attribute from the button tag.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enable Button | maketechstuff.com</title>
</head>
<body>
<div class="box">
<button type="button" class="button" disabled>Button</button>
<p class="output"></p>
<button type="button" class="change_button">change</button>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 15px;
text-align: center;
}
button {
font-size: 30px;
padding: 10px 50px;
margin-top: 50px;
cursor: pointer;
}
.output{
font-size: 25px;
}
JavaScript
let change_button = document.querySelector(".change_button");
let button = document.querySelector(".button");
let output = document.querySelector(".output");
change_button.addEventListener("click" , enable_button);
function enable_button(){
button.removeAttribute("disabled");
output.innerHTML = "Button is Enabled";
}
Output:
As you've seen, we can enable and disable buttons on click. When a button is disabled, its disabled state is typically visually apparent if it has a simple design with limited styling.
However, if you've applied custom styling to a button, such as background color or text color, the default disabled appearance might not be as noticeable. To ensure clear visual cues for disabled buttons with custom styling, we need to apply additional styling manually.
Disable and Enable the button with custom stylings.
The code below demonstrates how to achieve this:
Disabled the button:
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Disable Button | maketechstuff.com</title>
</head>
<body>
<div class="box">
<button type="button" class="button">Button</button>
<p class="output">Button is Enable</p>
<button type="button" class="change_button">change</button>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 15px;
text-align: center;
}
button {
font-size: 30px;
padding: 10px 50px;
margin-top: 50px;
cursor: pointer;
background-color: blue;
color: #fff;
border: none;
}
.output {
font-size: 25px;
}
JavaScript
let change_button = document.querySelector(".change_button");
let button = document.querySelector(".button");
let output = document.querySelector(".output");
change_button.addEventListener("click", disable_button);
function disable_button() {
button.setAttribute("disabled", true);
// Adding styles to add opacity to show button as a disabled.
button.style.opacity = "0.5";
output.innerHTML = "Button is Disable";
}
Output:
Enable the button:
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enable Button | maketechstuff.com</title>
</head>
<body>
<div class="box">
<button type="button" class="button" disabled>Button</button>
<p class="output">Button is Disabled</p>
<button type="button" class="change_button">change</button>
</div>
</body>
</html>
CSS
* {
padding: 0;
margin: 0;
}
body {
width: 100%;
height: 100%;
}
.box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 15px;
text-align: center;
}
button {
font-size: 30px;
padding: 10px 50px;
margin-top: 50px;
cursor: pointer;
background-color: blue;
color: #fff;
border: none;
}
.button {
opacity: 0.5;
}
.output {
font-size: 25px;
}
JavaScript
let change_button = document.querySelector(".change_button");
let button = document.querySelector(".button");
let output = document.querySelector(".output");
change_button.addEventListener("click", enable_button);
function enable_button() {
button.removeAttribute("disabled");
// Adding styles to remove previously added opacity to show button as a disabled.
button.style.opacity = "unset";
output.innerHTML = "Button is Enable";
}
Output:
So that's how you can disable and enable the button with html and dynamically with JavaScript. If you have any question or suggestion feel free to write in the comment section.
You may like:
- How to show and hide button based on input field value.
- How add CSS hover effects to button.
- How to add hover effects on button border.
- How to rotate the button border using HTML and CSS.
- How to detect button hold using JavaScript.
- How to change button text with animation using HTML CSS and JavaScript.
- How to create a read more and read less button functionality using HTML CSS and JavaScript.
Share your thoughts.