jQuery — Enable or Disable Button

Disable a HTML Button in 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:

// Disabling a button using JavaScript
document.querySelector('#button').disabled = true;

// Enabling a disabled button to enable it again 
document.querySelector('#button').disabled = false;

These are the steps we have to follow:

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:

const button = document.querySelector('#button');

const disableButton = () =>  
button.disabled = true;
>;

button.addEventListener('click', disableButton);

Here’s the codepen so you can test it out yourself and play a bit more with it by changing the code:

If you are using jQuery, check out our article on how to disable a button using jQuery. The process is pretty similar.

References

Related articles

Источник

How to disable or enable buttons using javascript and jquery

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

//defining button and input field  

Code Explanation

Using the above code we have defined two HTML elements namely an input text field and a button.

B) Javascript Code

//Program to disable or enable a button using javascript  

Code Explanation

1. Now, using javascript we store a reference to each element, namely input, and button.

2. By default a button’s state is enabled in HTML so by setting disabled = true, we have disabled the button for the user.

3. Then we add an event handler (addEventListener) to the input field with the event property change which monitors the interaction with elements.

4. Here we use the change property to monitor when the user types text inside the input field and run a function accordingly.

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

6. The function compares the value of the input field (the text field) with an empty string.

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

8. If the user inputs text in the input field, then the button will get enabled (disabled = false).

Complete Code

Output

A) Inactive State

The button is disabled as the text field is empty

B) Active State

The button is enabled as the text field is not empty

Using jQuery to enable/disable a button

     Name:     

1. For the jQuery method too, we start by creating an HTML button and text field (submit and tbName respectively) and setting the button to disabled state initially.

2. Here the ready() function is used to make the function available once the document has been loaded.

3. The .on() method in jquery attaches the event handler to the input field (tbName).

4. The change event will check for changes in the input field and run the function accordingly.

5. Just like in javascript, if the text field is empty the button remains disabled, else it gets enabled.

6. Here the .prop() method is used to change the state of the button.

Visualization

You can play around with the above code using this editor and see which part of the code does what. You can also try out different CSS options for the button etc.

Источник

Javascript set button disabled

Last updated: Jan 11, 2023
Reading time · 3 min

# Set the disabled Attribute using JavaScript

To set the disabled attribute, select the element and call the setAttribute() method on it, passing it disabled as the first parameter.

The setAttribute method will add the disabled attribute to the element.

Here is the HTML for the examples.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> button id="btn">Buttonbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const button = document.getElementById('btn'); // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute // button.removeAttribute('disabled'); 

If you need to remove the disabled attribute, use the removeAttribute() method.

Copied! 
const btn = document.getElementById('btn'); // ✅ Remove disabled attribute from button btn.removeAttribute('disabled'); // ✅ Add disabled attribute to button // btn.setAttribute('disabled', ''); 

We used the document.getElementById method to select the element by its id .

We then used the setAttribute method to add the disabled attribute to the button.

The method takes the following 2 parameters:

1. name — the name of the attribute to be set.
2. value — the value to assign to the attribute.

If the attribute already exists on the element, the value is updated, otherwise, a new attribute is added with the specified name and value.

When setting the value of a boolean attribute, such as disabled , we can specify any value for the attribute and it will work.

If a boolean attribute is not present, the value of the attribute is considered to be false .

If you need to remove an attribute, use the removeAttribute method.

Copied! 
const button = document.getElementById('btn'); // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute button.removeAttribute('disabled'); 

When setting the disabled attribute, we pass an empty string as the value for the attribute because it’s a best practice to set boolean attributes without a value.

The disabled attribute can be set to any value and as long as it is present on the element, it does the job.

# Setting the disabled attribute on multiple elements

Note that you can only call the setAttribute method on DOM elements.

If you need to set the disabled attribute on a collection of elements, you have to iterate over the collection and call the method on each element.

Here is the HTML for the next example.

Copied! 
DOCTYPE html> html lang="en"> head> title>bobbyhadz.comtitle> meta charset="UTF-8" /> head> body> button class="btn">Buttonbutton> button class="btn">Buttonbutton> button class="btn">Buttonbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const buttons = document.querySelectorAll('.btn'); for (const button of buttons)  // ✅ Set the disabled attribute button.setAttribute('disabled', ''); // ✅ Remove the disabled attribute // button.removeAttribute('disabled'); > 

We used the document.querySelectorAll method to select all elements with a class of btn .

We used the for. of loop to iterate over the collection and set the disabled attribute on each element.

# Removing the disabled attribute from multiple elements

Note that you should only call the removeAttribute() method on DOM elements. If you need to remove the disabled attribute from a collection of elements, you have to iterate over the collection and call the method on each individual element.

Here is the HTML for the next example.

Copied! 
DOCTYPE html> html lang="en"> head> meta charset="UTF-8" /> head> body> button disabled class="btn">Buttonbutton> button disabled class="btn">Buttonbutton> button disabled class="btn">Buttonbutton> script src="index.js"> script> body> html> 

And here is the related JavaScript code.

Copied! 
const buttons = document.querySelectorAll('.btn'); for (const button of buttons)  // ✅ Remove disabled attribute from button button.removeAttribute('disabled'); > 

We used the document.querySelectorAll method to select all elements with a class of btn .

We used the for. of loop to iterate over the collection and remove the disabled attribute from each element.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

Источник

How to Enable or Disable a Button With JavaScript: jQuery vs. Vanilla

Sajal Soni Last updated Jul 19, 2021

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

Источник