How to Disable a Button Conditionally in JavaScript?
In JavaScript, you can conditionally disable buttons based on specific criteria to control user interactions. Using simple if-else statements or event listeners, you can dynamically enable or disable buttons depending on form validation, user actions, or other conditions. This helps regulate the availability of buttons, ensuring they are only active when appropriate.
Approach
- The HTML form includes text and password input fields and a submit button that is initially disabled.
- CSS styles are applied to the button and input fields for better visual appearance, with specific dimensions and colors.
- JavaScript code runs after the DOM is fully loaded, targeting the form and submit button.
- An event listener on the form detects input changes and checks form validity.
- If the form is valid, the submit button is enabled and its background color changes to green; otherwise, the button remains disabled.
- Similarly, in the second example if the checkbox is checked, enable the button and add the .green class otherwise keep it disabled.
Example 1: The example below Check the form validation status before enabling the submit button. If validation passes, enable the button with a green background otherwise keep it disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Conditional Button Disable</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<form id="myForm">
<input type="text" id="username"
placeholder="Username" required><br>
<input type="password" id="password"
placeholder="Password" required><br>
<button type="submit" id="submitButton"
disabled>
Submit
</button>
</form>
<script src="script.js"></script>
</body>
</html>
#submitButton {
margin: 10px;
padding: 10px;
color: white;
font-size: large;
}
#username,
#password {
width: 200px;
height: 30px;
border: 2px solid green;
margin: 10px;
}
#myForm {
display: flex;
flex-direction: column;
align-items: center;
}
document.addEventListener('DOMContentLoaded', function () {
var form = document.getElementById('myForm');
var submitButton = document.getElementById('submitButton');
form.addEventListener('input', function () {
if (form.checkValidity()) {
submitButton.disabled = false;
submitButton.style.backgroundColor = "green";
} else {
submitButton.disabled = true;
}
});
});
Output:
Output
Example 2: The example below check if the checkbox is checked before enabling the button. If checked, enable the button and add the .green class otherwise keep it disabled.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Conditional Button Disable</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="checkbox">
<input type="checkbox" id="terms">
<label for="terms">
I agree to the terms and conditions
</label>
</div>
<button id="actionButton" disabled>
Perform Action
</button>
</div>
<script src="script.js"></script>
</body>
</html>
.container {
display: flex;
align-items: center;
flex-direction: column;
margin: 100px;
}
.checkbox {
margin: 10px;
padding: 20px;
color: green;
font-size: large;
}
#actionButton {
margin: 10px;
padding: 10px;
color: rgb(15, 1, 1);
font-size: large;
}
.green {
background-color: green;
}
const termsCheckbox = document.getElementById('terms');
const actionButton = document.getElementById('actionButton');
termsCheckbox.addEventListener('change', validateCheckbox);
function validateCheckbox() {
actionButton.disabled = !termsCheckbox.checked;
if (termsCheckbox.checked) {
actionButton.classList.add('green');
} else {
actionButton.classList.remove('green');
}
}
actionButton.addEventListener('click', function () {
document.getElementById('terms').checked = false;
actionButton.disabled = true;
actionButton.classList.remove('green');
});
Output:
Output