How to Disable a Button with jQuery

John on January 27, 2021

To disable a button with jQuery, add a disabled attribute to it with the prop() method.

To demonstrate this, let's create a button that gets disabled when clicked.

<button type="button" id="foo">Click me</button>

$('#foo').click(function() {
  $(this).prop('disabled', true);
});

The prop() method takes two arguments. The first is the name of the attribute and the second is its value. We can reenable a button by setting the disabled attribute to false like this:

<button type="button" id="foo" disabled>Disabled</button>

<button type="button" id="bar">Enable other button</button>

$('#bar').click(function() {
  $('#foo').prop('disabled', false).text('Enabled');
});