Enable and Disable a Button in JavaScript

Bonus: How to Disable a Button in JavaScript Based on Condition

Let’s go further and create some code that disables the button only if its text matches a condition.

Here is what you will need to know:

• create a button in HTML
• disable a button in JavaScript
• write a condition using JavaScript
• get a button text in JavaScript (you will use the innerText property, but don’t worry you will see how to use it below!)

To do so, you can come back to step 1, 2, and 3, except that we disable the button only if the button text is “Can you click me?”.

// Select the button element in your HTML code const button = document.getElementById('mainButton') // Disable the selected button in JavaScript based on a condition // If the button text is 'Can you click me?' if (button.innerText === 'Can you click me?')

If you execute this code in your browser, the button should be disabled. Now, let’s change the condition to another text. For example: button.innerText === "Click here!" , refresh your browser, and the button should be enabled.

Full code to enable and disable a button in JS 👇

Thanks for reading. Let’s connect!

➡️ I help you grow into Web Development, and I share my journey as a Nomad Software Engineer. Join me on Twitter for more. 🚀🎒

Источник

Disable button in jQuery [With examples]

To disable a button with jQuery you need to set the disabled property on the button using the prop method. For example $('.my-button').prop('disabled', true) .

Here's the step by step process:

• Select the button you want to disable.
• Use the jQuery prop method.
• Set the disabled property to true

The prop method admits two parameters. The first is the property we want to set and the second is the value we want to give to such property. (Or a function that returns a value)

Disable button on click

So, let's say we have a button and we want to disable the button when clicking in another button:

button id="my-button">Savebutton>
button id="disable-button">Disable buttonbutton>

This is the jQuery code we will need:

var disableButton = (e) =>  
$('#my-button').prop('disabled', true);
>;

$(document).on('click', '#disable-button', disableButton);

Disabling submit button when textarea is empty

This is a very common scenario that we can find in plenty of web applications or websites. In those cases where it makes no sense to submit a form with an empty textarea, it's a good practice to disable the submit button when their textarea has no content.

• Attach the keyup event to our textarea element
• Retrieve the value of the textarea
• Remove white trailing whitespaces
• Disable the submit button when the value is empty.

Let's say we have the following HTML code with our textarea and our button:

div> 
textarea id="my-textarea" rows="5" cols="30">textarea>
div>

button id="my-button" disabled>Savebutton>

This would be our jQuery code:

var checkTextarea = (e) =>  
const content = $("#my-textarea").val().trim(); 
$('#my-button').prop('disabled', content === '');
>;

$(document).on('keyup', '#my-textarea', checkTextarea);

Remember that the second parameter of the prop method also allows us to use a function instead of a boolean?

We can test it out in this same example by replacing our previous code with the following one, where we just return a boolean value on the function we pass as a parameter.

// Example: using a function as the second parameter
// instead of a boolean
var checkTextarea = (e) =>  
$('#my-button').prop('disabled', (e) =>  
return $("#my-textarea").val().trim() === ''; 
>);
>;

Disabling submit button when input is empty

I updated the id attribute and the function name but the rest is all the same:

Disable button on page load

The easiest way to show a button as disabled on page load is by directly assigning to it the disabled attribute on the HTML code:

 
button id="my-button">Savebutton>

 
button id="my-button" disabled>Savebutton>

However, if for any reason you need to do this dynamically and you have no way to modify the HTML code, you can still do this using jQuery.

It is as simple as disabling it on document ready:

$(document).ready(function ()  
$('#my-button').prop('disabled', true);
>);

Enabling button with jQuery

As you've probably guessed, enabling a button is as simple as disabling it. In fact, we will be using the exact same prop method. The only difference is that now we'll set the value for disabled to false instead of true .

// Disables a button
$('#my-button').prop('disabled', true);

// Enables a button
$('#my-button').prop('disabled', false);

Checking if the button is disabled or enabled with jQuery

To check the state of a button all we have to do is get the value of the disabled property.

The prop method not only provides us a way to set the properties but also allows us to check their state too. It's as simple as omitting the second parameter:

// Gets the disabled state of a button
const isDisabled = $('#my-button').prop('disabled');

if( isDisabled ) 
console.log("Is disabled!");
>
else 
console.log("Is enabled");
>

Disable button with JavaScript

If jQuery is not your thing, you can disable a button with vanilla JavaScript (aka, with just JavaScript).

To disable a button with JavaScript you need to set the disabled property to true by directly setting the value to the property disabled on the DOM element. For example: document.querySelector('#my-button').disabled = true .

// Disabling button using jQuery
$('#my-button').prop('disabled', true);

// Disabling button using JavaScript
document.querySelector('#my-button').disabled = true



// Retrieving disabled state with jQuery
const state = $('#my-button').prop('disabled');

// Retrieving disabled state with JavaScript
const state = document.querySelector('#my-button').disabled;

Then you would also need to change the respective event listeners if you use any.

Here's an example of how to disable the button after click using JavaScript:

References

Related articles

Источник