How to Disable a Button Using jQuery

There are many reasons to disable a button in a web application. Whether it’s to prevent a user from adding a sold out item to their shopping cart, or not allowing the user to click a button after an action is performed, jQuery does not have a method to disable buttons directly.

Instead, we use the prop() method, a newer addition to the library — appearing in jQuery 1.6. It was introduced as a solution to retrieving property values of selected elements. Previously, this was done with the attr() method, which retrieves attribute values. 

Having a method concerned with getting attribute values while also retrieving property values yielded unpredictable results at times. As of jQuery 1.6, the prop() method was introduced to solve this disparity. For the sake of our purposes, we will be using prop() to disable our buttons because “disabled” is a property value of a HTML button element. 

If you’d like to learn more about using att() vs. prop(), read the brief history and tutorial.

prop() jQuery Syntax

Now that we’ve touched on why and how to use prop(), we can take a look at syntax. Remember that prop() is just another jQuery method and these methods are called on a selected element — in our case, a button. Let’s look at how we might disable a button with an id of “btn”.

<button id='btn' type='submit'>
Button is Disabled
</button>

This HTML renders the button. 

Our button is rendering! Now we can set the property value of “disabled” to true using jQuery prop().

$('#btn').prop('disabled', true)

As we can see, prop() accepts the value as a string and we set the boolean value in the second argument. Boolean values are either true or false. Here’s a guide that goes deeper into how to use booleans. 

After setting the “disabled” property to true, we render an unclickable button. Now that we understand the syntax, let’s take a look at why and when we’d want to use this. In the next section, we will take a look at an e-commerce site with products having an attribute of “sold-out?”.

Using jQuery prop() to Disable a Button

In this example, we have a shopping app that will disable an “Add to Cart” button if the product is sold out. For this example, we will render a simple HTML button, and a <div> to add the item if it is not sold out. 

<button class='add' type='submit'>
Add to Cart
</button>

<div>

</div>

Let’s see how our button rendered. 

Now, let’s create a product and a callback function — a function passed to another function to be called later — to display our cart in the <div> above. If the product is sold out, the button will disable. 

const product = {
name: 'Jacket',
price: 50.00,
soldOut: false
}


$(document).ready(function() {
 $('button.add').click(function(event) {
   event.preventDefault()
   alert(JSON.stringify(product.soldOut))
   if (product.soldOut) {
   $('.add').prop('disabled', true)
   } else {
   $('div').append(product.name)
   }
 })
})

We have created a variable called product that contains an object. The object has properties of name, price, and soldOut. If the property soldOut is false, we should see our jacket displayed in our <div>. Let’s click Add to Cart and see what happens.

Since our soldOut property is set to false, we displayed our product in the <div>. What if that was the last jacket in stock? Let’s see what happens when the soldOut property is set to true.

const product = {
name: 'Jacket',
price: 50.00,
soldOut: true
}

We expect the Add to Cart button to now be disabled.

That’s exactly what we wanted. Using the conditional statement in the callback function, we were able to disable the Add to Cart button. Now users can’t add sold out items to their cart. We avoided a major headache in our e-commerce app!

Conclusion

In learning how to disable an HTML button with jQuery, we’ve discovered that jQuery doesn’t have an explicit method to do so. To work around this, we used the prop() method to set the button property “disabled” to true. Then we saw an example of how disabling a button is useful.

Guiding the user experience in web development is essential. In this guide, we used disabling buttons to guide the user experience. Explore how disabling a button could help direct your user experience in your next project.