Disable a Button With JavaScript [With Examples]
To disable a button using only JavaScript you need to set the disabled property to false . For example: element.disabled = true .
And to enable a button we would do the opposite by setting the disabled JavaScript property to false .
Here a more complete example where we select the button and then we change its disabled property:
These are the steps we have to follow:
- Query the button you want to disable
- Set the disabled property to false .
The disabled property reflects the HTML attribute disabled and provide a way to change this property dynamically with JavaScript.
Disable button example
For demo purposes and to keep it as simple as possible we'll be disabling the button when clicking on itself:
Here's the codepen so you can test it out yourself and play a bit more with it by changing the code:
References
Related articles
report this ad
JavaScript code to disable button elements
When you need to disable buttons using JavaScript, you can update the disabled attribute of <button> elements to true .
Every HTML <button> element has the disabled attribute which is set to false by default, even when the <button> doesn’t have a disabled attribute present. You can test this by running the following HTML code:
That’s why when you need to disable or enable a <button> element, all you have to do is change the value of the disabled attribute:
Disabling multiple buttons with JavaScript
The same technique also applies when you want to disable many buttons on your HTML page. First, You need to select the buttons using the document.getElementsByTagName() method:
The getElementsByTagName() method will return a collection of Then, you need to iterate through the buttons and set the disabled attribute of each button to false . You can use the for loop to do so:
Here’s an example of HTML <body> tag that you can run on your browser:
Disable button after click
The last thing you may want to do is to disable the <button> after the user clicked it to prevent double clicks. You just need to wrap the disabling code in a function and pass it to the onclick attribute of your <button> element:
The code above will disable the saveBtn once it has been clicked. Feel free to modify it to suit your requirements.
Level up your programming skills
I'm sending out an occasional email with the latest programming tutorials. Drop your email in the box below and I'll send new stuff straight into your inbox!
report this ad
About
Sebhastian is a site that makes learning programming easy with its step-by-step, beginner-friendly tutorials.
Learn JavaScript and other programming languages with clear examples.
Search
Type the keyword below and hit enter
report this ad
Click to see all tutorials tagged with:
report this ad
How to disable or enable buttons using javascript and jQuery?
Let us learn how to enable or disable buttons using javascript and jQuery based on whether the input field is filled or empty.
If you are a beginner or not very familiar with javascript or jQuery, we recommend that you go through the entire article. However, if you are just looking for the code, click here!
Table of Contents
Introduction to disabling/enabling buttons
Often while filling out web forms have you noticed how the submit button just won’t work unless we have filled all the required fields?
This is done by controlling the state of the button (enabled/disabled) based on whether the input field is filled or empty. The same principle applies to checkboxes and radio buttons.
Do you wish to implement such a feature on your web form too? Read on!
Before diving into the code let us first look at the logic behind toggling between different states of the button.
Logic behind toggling between disabled and enabled states of buttons
- Set button to disabled state in the beginning
- If the input value of the required field is empty, let the button remain disabled. (Disabled state = TRUE)
- If the input value of the required field is not empty, change the state of the button to enabled. (Or set disabled state = FALSE).
Below, we are going to see how to disable/enable a button with one required text field implemented using Javascript and jQuery.
Code Implementation for changing the state of the button
1. Using Javascript
A) HTML
Add the following HTML Code to your editor
Exit fullscreen mode
Code Explanation
Using the above code we have defined two HTML elements namely an input text field and a button.
B) Javascript Code
Exit fullscreen mode
Code Explanation
Now, using javascript we store a reference to each element, namely input, and button.
By default a button’s state is enabled in HTML so by setting disabled = true, we have disabled the button for the user.
Then we add an event handler (addEventListener) to the input field with the event property change which monitors the interaction with elements.
Here we use the change property to monitor when the user types text inside the input field and run a function accordingly.
The function we run here is called the stateHandle() that gets activated every time there is a change in the status of the input field.
The function compares the value of the input field (the text field) with an empty string.
If the user has not typed anything, then the text field will be equal ( === ) to the empty string and the button will remain disabled (disabled = true).
If the user inputs text in the input field, then the button will get enabled (disabled = false).
Как заблокировать кнопку js
In this article, we will demonstrate how to enable and disable buttons using jQuery. This article requires some familiarity with HTML, CSS, JavaScript, and jQuery. The jQuery prop() function can be used to disable a button.
The property values can be explicitly retrieved using the prop() method. The prop() method only returns the property value for the first matching element in the set. For a property whose value hasn’t been set, or for a matched set that does not contain elements, it returns Undefined.
Syntax:
The selected element’s boolean attribute can be set to true or false using this method.
The function returns a boolean value. Whenever the selected element contains a boolean attribute (disabled, checked), it returns true otherwise.
What is a disabled attribute?
This is a boolean attribute that indicates the element should not be displayed. It is unusable to use an element that is disabled. You can set the disabled attribute to prevent the element from being used until another condition is met (such as checking a box).
Example: When you click the button below, the button above is disabled, and when you double click the button below, the button above is enabled. The prop is applied in this example to demonstrate how it is used correctly and how it can be applied.