In this article, we’ll discuss how you can enable or disable a button with JavaScript. First, we’ll go through how it works in vanilla JavaScript and later on we’ll see how to do it with jQuery.
JavaScript is one of the core technologies of the web. The majority of websites use it, and all modern web browsers support it without the need for plugins. In this series, we’re discussing different tips and tricks that will help you in your day-to-day JavaScript development.
When you’re working with JavaScript, more often than not you need to enable or disable a button based on some actions. Usually, when you’re working with forms, you want to keep the submit button disabled until a user fills all the mandatory fields in a form. Once a user fills all the mandatory fields, you would like to automatically enable it so that a user can click on a button to submit the form.
In HTML, a button element has its own state, and thus, you can keep it either enabled or disabled. For example, when a form is loaded, you can keep a button in the disabled state. Later on, you can enable it with the help of JavaScript.
Today, we’ll discuss how you can enable or disable a button with JavaScript with a couple of real-world examples.
Enable or Disable a Button With Vanilla JavaScript
In this section, we’ll discuss a real-world example, which demonstrates how you can enable or disable a button with vanilla JavaScript.
Let’s go through the following example.
<html>
<head>
<script>
function toggleButton()
{
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username && password) {
document.getElementById('submitButton').disabled = false;
} else {
document.getElementById('submitButton').disabled = true;
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
In the above example, we’ve built a very simple form which has a couple of text fields along with a submit button. It’s important to note that when a form is loaded, the submit button is in the disabled state. We’ve used the disabled property to set the default state of the submit button to disabled.
Next, we’ve defined the onchange event on the username and password input fields. So when a user changes the value of these fields, it would trigger the onchange event, which eventually calls the toggleButton function. In the toggleButton function, we’re checking if a user has entered values in both the mandatory fields. If that’s the case, we’ll set the disabled property of the submit button to false, which eventually enables the submit button so that a user can click on that. On the other hand, if either the username or the password field is blank, we’ll set the disabled property to true, which disables the submit button so that a user can’t click on it.
In the above example, we’ve used an input submit button, but you can also use an HTML button as shown in the following example.
<button id="submitButton" disabled/>Submit</button>
So that’s how you can use vanilla JavaScript to enable or disable a button. In the next section, we’ll see how you can use the jQuery library.
Enable or Disable a Button With jQuery
In this section, we’ll discuss how you can toggle the state of a button with the help of the jQuery library.
Let’s revise the example which we’ve just discussed in the previous section.
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
function toggleButton()
{
var username = $('#username').val();
var password = $('#password').val();
if (username && password) {
$('#submitButton').attr('disabled', false);
} else {
$('#submitButton').attr('disabled', true);
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
First of all, we’ve loaded the jQuery library so that we can use it in our function. The only difference in the above example is that we’ve used the attr method of the jQuery object to alter the state of a button.
The attr method of the jQuery object is used to either set or get the value of the specific attribute of an element. If you use it with only a single argument, it’s used to get the value of the attribute. On the other hand, if you use it with two arguments, it’s used to set the value of the attribute. In our case, we’ve used it to set the value of the disabled attribute of a button. Apart from that, everything is the same.
If you’re using jQuery 1.5+, you’ll need to use the prop method instead of the attr method as shown in the following snippet.
//...
$('#submitButton').prop('disabled', true);
Alternatively, if you want to remove any attribute of an element, you can also use the removeAttr method of the jQuery object as shown in the following snippet. It would have the same outcome as if you would have set the disabled attribute to false.
//...
$('#submitButton').removeAttr('disabled');
So these are the different ways that you can use jQuery to enable or disable a button.
Conclusion
Today, we discussed how you can enable or disable a button in JavaScript with a couple of real-world examples. Along with vanilla JavaScript, we also discussed how to achieve it with the help of the jQuery library.
