Jak wyłączyć wszystkie <input> wewnątrz formularza za pomocą jQuery?

145 
<form id="target">
....
</form>
jquery forms o mój Boże
źródło

Odpowiedzi:

283

W starszych wersjach możesz użyć attr. Od jQuery 1.6 powinieneś używać propzamiast tego:

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

Aby wyłączyć wszystkie elementy formularza wewnątrz „celu”. Zobacz :input:

Dopasowuje wszystkie elementy wejściowe, tekstowe, zaznaczania i przyciski.

Jeśli chcesz tylko <input>elementy:

$("#target input").prop("disabled", true);
cletus
źródło
21
Od jQuery 1.6 powinieneś używać$("#target :input").prop("disabled", true);
danijel
4
Ktoś powinien edytować odpowiedź zaktualizowaną metodą - w tym momencie to tylko zła informacja.
Ben Claar,
a w wywołaniu zwrotnym submit (), używając $ (this), jak to zrobić?
Olivier Pons
2
@OlivierPons $(this).closest('form').find('input').prop('disabled', true);. Nie jestem pewien, czy możesz to lepiej skonsolidować, nadal jestem raczej noobem w jQuery.
wjervis
39

Powyższy przykład jest technicznie niepoprawny. Zgodnie z najnowszą wersją jQuery, prop()metoda powinna być używana do takich rzeczy, jak wyłączone. Zobacz ich stronę API.

Aby wyłączyć wszystkie elementy formularza wewnątrz 'target', użyj selektora: input, który pasuje do wszystkich elementów input, textarea, select i button.

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

Jeśli chcesz tylko elementy, użyj tego.

$("#target input").prop("disabled", true);
MetaSkills
źródło
15

Również bardziej zwięzłym sposobem jest użycie ich silnika selektorów. Tak więc, aby wyłączyć wszystkie elementy formularza w div lub form rodzicu.

$myForm.find(':input:not(:disabled)').prop('disabled',true)
MetaSkills
źródło
13

możesz dodać

 <fieldset class="fieldset">

a potem możesz zadzwonić

 $('.fieldset').prop('disabled', true);
Otto Kanellis
źródło
8

Aby wyłączyć wszystkie formularze, wystarczy napisać:

jQuery 1.6+

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

jQuery 1.5 i starsze

$("#form :input").attr('disabled','disabled');
Angel Cuenca
źródło
8

Za pomocą tej jednej linii możesz wyłączyć dowolne pole wejściowe w formularzu

$('form *').prop('disabled', true);
Samir Rahimy
źródło
to niepotrzebnie dodaje wyłączoną właściwość do każdego elementu w formularzu.
Osvaldo Maria,
@OsvaldoMaria tak, to jest z powodu selektora star (all), możesz dodać .custom-class do wszystkich elementów wejściowych, które chcesz wyłączyć, a następnie zmienić selektor na $ ('form .custom-class'). Prop ( „wyłączone”, prawda ”).
Samir Rahimy
-1

Ostateczną odpowiedź (obejmującą zmiany w api jQuery w wersji 1.6) udzielił Gnarf

ErichBSchulz
źródło
Poprosił o „wyłączenie wszystkich danych wejściowych w formularzu”, a nie tylko o „wyłączenie wszystkich danych wejściowych”.
Bengala
@Bengala, jasne, ale ostro mnie oceniasz za to, że jako pierwszy zauważyłem, że API się zmieniło. W czasie, gdy to opublikowałem, żadna z pozostałych odpowiedzi nie wspomniała o tym punkcie.
ErichBSchulz
Rozumiem, ale myślę, że powinieneś dołączyć poprawną odpowiedź do odpowiednich kredytów, link pokazuje tylko, jak wyłączyć wszystkie wejścia, co nalegam, nie odpowiada w ogóle na pytanie.
Bengala,