165
<form id="target">
....
</form>

8 Answers 8

326

In older versions you could use attr. As of jQuery 1.6 you should use prop instead:

$("#target :input").prop("disabled", true);

To disable all form elements inside 'target'. See :input:

Matches all input, textarea, select and button elements.

If you only want the <input> elements:

$("#target input").prop("disabled", true);
4
  • 24
    As of jQuery 1.6 you should use $("#target :input").prop("disabled", true);
    – danijel
    Mar 8, 2013 at 9:49
  • 5
    Someone should edit the answer with the updated method -- this is just bad information at this point.
    – Ben Claar
    Oct 17, 2013 at 18:25
  • and in a submit() callback, using $(this), how to do that? Jan 8, 2015 at 14:15
  • 2
    @OlivierPons $(this).closest('form').find('input').prop('disabled', true);. Not sure if you can consolidate that better, I'm still rather noobish at jQuery.
    – wjervis
    Jan 14, 2015 at 13:11
44

Above example is technically incorrect. Per latest jQuery, use the prop() method should be used for things like disabled. See their API page.

To disable all form elements inside 'target', use the :input selector which matches all input, textarea, select and button elements.

$("#target :input").prop("disabled", true);

If you only want the elements, use this.

$("#target input").prop("disabled", true);
0
18

Also the more concise way is to use their selectors engine. So to disable all form elements in a div or form parent.

$myForm.find(':input:not(:disabled)').prop('disabled',true)
16

you can add

 <fieldset class="fieldset">

and then you can call

 $('.fieldset').prop('disabled', true);
12

With this one line you can disable any input field in a form

$('form *').prop('disabled', true);
2
  • this unnecessarily adds a disabled property to every element in the form. Nov 12, 2019 at 12:37
  • @OsvaldoMaria yeah, that is because of the star (all) selector, you could add a .custom-class to all input elements you want to disable, then change the selector to $('form .custom-class').prop('disabled', true'). Nov 13, 2019 at 16:51
11

To disable all form, as easy as write:

jQuery 1.6+

$("#form :input").prop("disabled", true);

jQuery 1.5 and below

$("#form :input").attr('disabled','disabled');
3

You can do it like this:

//HTML BUTTON
<button type="button" onclick="disableAll()">Disable</button>

//Jquery function
function disableAll() {
    //DISABLE ALL FIELDS THAT ARE NOT DISABLED
    $('form').find(':input:not(:disabled)').prop('disabled', true);

    //ENABLE ALL FIELDS THAT DISABLED
    //$('form').find(':input(:disabled)').prop('disabled', false);
}
0

The definitive answer (covering changes to jQuery api at version 1.6) has been given by Gnarf

3
  • He asked to "disable all inputs inside a form", not just "disable all inputs". May 22, 2017 at 0:12
  • @Bengala sure, but you're marking me harshly for being the first to point out the API had changed. At the time I posted this none of the other answers mentioned this point. Sep 25, 2018 at 20:29
  • I understand, but I think you should include a correct answer with the respective credits, the link just show how to disable all inputs, which I insist, it doesn't answer at all the question. Sep 26, 2018 at 21:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.