How to Disable/Enable Form Elements with jQuery

John on February 11, 2021

To disable a form element with jQuery, use the prop() method and pass "disabled" as the first argument and true as the second.

To demonstrate this let's create a simple form and disable one of the text inputs using jQuery.

<form action="something" method="post" id="contact">

  <label for="name">Name</label>
  <input type="text" name="name" id="name">

  <label for="age">Age</label>
  <input type="number" name="age" id="age">

  <button type="button" id="submit_contact">Submit</button>
</form>

$('#name').prop('disabled', true);

Enable a Form Element with jQuery

To reenable a form element, use the prop() method again with false as the second argument instead.

<form action="something" method="post" id="contact">

  <label for="name">Name</label>
  <input type="text" name="name" id="name" disabled>

  <label for="age">Age</label>
  <input type="number" name="age" id="age">

  <button type="button" id="submit_contact">Submit</button>
</form>

$('#name').prop('disabled', false);

In the above example, the disabled attribute is from the name input field.

Disable All Form Elements with jQuery

To disable all elements (input, textarea, select, submit button .etc) use the :input pseudo selector and the prop() method like this:

<form action="something" method="post" id="contact">

  <label for="name">Name</label>
  <input type="text" name="name" id="name">

  <label for="age">Age</label>
  <input type="number" name="age" id="age">

  <button type="button" id="submit_contact">Submit</button>
</form>

$('#contact :input').prop('disabled', true);