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.

Find Your Bootcamp Match
- Career Karma matches you with top tech bootcamps
- Access exclusive scholarships and prep courses
By continuing you agree to our Terms of Service and Privacy Policy , and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.
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.

"Career Karma entered my life when I needed it most and quickly helped me match with a bootcamp. Two months after graduating, I found my dream job that aligned with my values and goals in life!"
Venus, Software Engineer at Rockbot
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.