Wyłączyć / włączyć wejście za pomocą jQuery?


Odpowiedzi:


3810

jQuery 1.6+

Aby zmienić disabledwłaściwość, należy użyć .prop()funkcji.

$("input").prop('disabled', true);
$("input").prop('disabled', false);

jQuery 1.5 i poniżej

.prop()Funkcja nie istnieje, ale .attr()nie podobna:

Ustaw wyłączony atrybut.

$("input").attr('disabled','disabled');

Aby włączyć ponownie, należy użyć właściwej metody .removeAttr()

$("input").removeAttr('disabled');

W dowolnej wersji jQuery

Zawsze możesz polegać na rzeczywistym obiekcie DOM i jest prawdopodobnie nieco szybszy niż dwie pozostałe opcje, jeśli masz do czynienia tylko z jednym elementem:

// assuming an event handler thus 'this'
this.disabled = true;

Zaletą korzystania z metod .prop()lub .attr()jest to, że można ustawić właściwość dla kilku wybranych elementów.


Uwaga: w 1.6 istnieje .removeProp()metoda, która brzmi bardzo podobnie removeAttr(), ale NIE NALEŻY UŻYWAĆ jej w przypadku właściwości natywnych, takich jak 'disabled' fragment z dokumentacji:

Uwaga: Nie należy używać tej metody do usuwania właściwości natywnych, takich jak zaznaczone, wyłączone lub wybrane. Spowoduje to całkowite usunięcie właściwości i po usunięciu nie będzie można jej ponownie dodać do elementu. Zamiast tego użyj .prop (), aby ustawić te właściwości na false.

W rzeczywistości wątpię, czy istnieje wiele uzasadnionych zastosowań tej metody, rekordy boolowskie są wykonywane w taki sposób, że powinieneś ustawić je na false zamiast „usuwać” je jak ich „atrybut” odpowiedniki w 1.5


9
Na marginesie, pamiętaj, że jeśli chcesz wyłączyć WSZYSTKIE kontrolki wprowadzania formularza - w tym. pola wyboru, radia, pola tekstowe itp. - musisz wybierać ':input', nie tylko 'input'. Ten ostatni wybiera tylko rzeczywiste elementy <input>.
Cornel Masson,

35
@CornelMasson input,textarea,select,buttonjest nieco lepszy w użyciu niż :input- :inputponieważ selektor jest dość nieefektywny, ponieważ musi wybierać, *a następnie zapętlać każdy element i filtrować według zmiennej - jeśli przekażesz 4 selektory zmiennych bezpośrednio, jest DUŻO szybszy. Ponadto :inputnie jest standardowym selektorem CSS, więc wszelkie możliwe zyski wydajności querySelectorAllsą tracone
gnarf

3
Czy to po prostu uniemożliwia użytkownikowi dostęp do niego, czy faktycznie usuwa go z żądania internetowego?
OneChillDude

4
Korzystanie z .removeProp("disabled")powodowało problem „całkowite usunięcie właściwości i brak dodawania”, jak wskazał @ThomasDavidBaker, w przypadku niektórych przeglądarek, takich jak Chrome, podczas gdy działało dobrze w niektórych, takich jak Firefox. Powinniśmy tutaj naprawdę uważać. Zawsze używaj .prop("disabled",false)zamiast tego
Sandeepan Nath

6
Ani .prop ani .attr nie są wystarczające do wyłączenia elementów kotwiczących; .prop nawet nie wyszarzy „kontroli” (.attr robi, ale href jest nadal aktywny). Musisz również dodać moduł obsługi zdarzeń kliknięcia, który wywołuje funkcję preventDefault ().
Jeff Lowery,

61

Tylko ze względu na nowe konwencje i & umożliwiający dostosowanie go w przyszłości (chyba że w przypadku ECMA6 zmieni się drastycznie (????)):

$(document).on('event_name', '#your_id', function() {
    $(this).removeAttr('disabled');
});

i

$(document).off('event_name', '#your_id', function() {
    $(this).attr('disabled','disabled');   
});

12
Jikes! Dlaczego $(document).on('event_name', '#your_id', function() {...})zamiast $('#your_id').on('event_name', function() {...}). Jak opisano w dokumentacji jQuery .on (), poprzednia korzysta z delegowania i nasłuchuje wszystkich event_name zdarzeń, które pojawiają się w bąbelkach, documenti sprawdza je pod kątem dopasowania #your_id. Ten ostatni słucha $('#your_id')wyłącznie wydarzeń i to skaluje się lepiej.
Peter V. Mørch

23
Pierwsze działa dla elementów wstawionych do DOM w dowolnym momencie, drugie tylko dla tych, które zachowały się w tym momencie.
crazymykl 10.10.13

1
@crazymykl Poprawnie, ale nie powinieneś dodawać elementów o id już obecnych na twojej stronie.
SepehrM

33
    // Disable #x
    $( "#x" ).prop( "disabled", true );
    // Enable #x
    $( "#x" ).prop( "disabled", false );

Czasami musisz wyłączyć / włączyć element formularza, taki jak input lub textarea. Jquery pomaga to łatwo zrobić, ustawiając atrybut disabled na „disabled”. Na przykład:

  //To disable 
  $('.someElement').attr('disabled', 'disabled');

Aby włączyć wyłączony element, musisz usunąć atrybut „wyłączony” z tego elementu lub opróżnić jego ciąg. Na przykład:

//To enable 
$('.someElement').removeAttr('disabled');

// OR you can set attr to "" 
$('.someElement').attr('disabled', '');

patrz: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html


13
$("input")[0].disabled = true;

lub

$("input")[0].disabled = false;

2
Oczywiście pytanie dotyczy jQuery, a to zmienia stan w zwykłym JavaScript, ale działa.
podstawowe6

1
Zmienia to stan w JavaScript, ale nadal używa selektora jQuery, aby uzyskać pierwsze wejście.
cjsimon

3
Ale nie sądzę, żebyśmy
tworzyli

8

Możesz umieścić to gdzieś globalnie w swoim kodzie:

$.prototype.enable = function () {
    $.each(this, function (index, el) {
        $(el).removeAttr('disabled');
    });
}

$.prototype.disable = function () {
    $.each(this, function (index, el) {
        $(el).attr('disabled', 'disabled');
    });
}

A potem możesz pisać takie rzeczy jak:

$(".myInputs").enable();
$("#otherInput").disable();

3
Chociaż owijanie funkcji jest przydatne, powinieneś był użyć tej właściwości, propa nie właściwości, aby działała poprawnie (zakładając, że jQuery 1.6 lub nowszy). attrdisabled
Gone Coding

1
@TrueBlueAussie Jakie są wady używania attr? Używam powyższego kodu w niektórych projektach i, o ile pamiętam, działa dobrze
Nicu Surdu

1
Oczywistymi wyjątkami są kontrolki z właściwościami za kulisami. Najbardziej znanym jest checkedwłaściwość pól wyboru. Używanie attrnie da tego samego rezultatu.
Gone Coding

7

Jeśli chcesz tylko odwrócić bieżący stan (np. Zachowanie przycisku przełączania):

$("input").prop('disabled', ! $("input").prop('disabled') );

1
dzięki mam to samo dla przełącznika; $ („input”). prop ('disabled', function (i, v) {return! v;});
Floww

5

Istnieje wiele sposobów korzystania z nich, możesz włączyć / wyłączyć dowolny element :

Podejście 1

$("#txtName").attr("disabled", true);

Podejście 2

$("#txtName").attr("disabled", "disabled");

Jeśli używasz jQuery 1.7 lub wyższej wersji, użyj prop () zamiast attr ().

$("#txtName").prop("disabled", "disabled");

Jeśli chcesz włączyć dowolny element, musisz po prostu zrobić coś przeciwnego do tego, co zrobiłeś, aby go wyłączyć. Jednak jQuery zapewnia inny sposób na usunięcie dowolnego atrybutu.

Podejście 1

$("#txtName").attr("disabled", false);

Podejście 2

$("#txtName").attr("disabled", "");

Podejście 3

$("#txtName").removeAttr("disabled");

Ponownie, jeśli używasz jQuery 1.7 lub wyższej wersji, użyj prop () zamiast attr (). To jest. W ten sposób włączasz lub wyłączasz dowolny element za pomocą jQuery.


2

Aktualizacja na rok 2018:

Teraz nie ma potrzeby dla jQuery i minęło trochę czasu odkąd document.querySelector lub document.querySelectorAll(dla wielu elementów) zrobić niemal dokładnie taką samą pracę jak $, plus bardziej wyraźnych te getElementById, getElementsByClassName,getElementsByTagName

Wyłączenie jednego pola klasy „input-checkbox”

document.querySelector('.input-checkbox').disabled = true;

lub wiele elementów

document.querySelectorAll('.input-checkbox').forEach(el => el.disabled = true);

1
pytanie konkretnie dotyczy jQuery ... ale równie dobrze twoje stwierdzenie jest poprawne i warto wiedzieć, że jQuery nie musi być używane do tego, gdy jest już wiele elementów.
ADyson

2

Możesz użyć metody jQuery prop (), aby wyłączyć lub włączyć element formularza lub kontrolować dynamicznie za pomocą jQuery. Metoda prop () wymaga jQuery 1.6 i nowszych.

Przykład:

<script type="text/javascript">
        $(document).ready(function(){
            $('form input[type="submit"]').prop("disabled", true);
            $(".agree").click(function(){
                if($(this).prop("checked") == true){
                    $('form input[type="submit"]').prop("disabled", false);
                }
                else if($(this).prop("checked") == false){
                    $('form input[type="submit"]').prop("disabled", true);
                }
            });
        });
    </script>

1

Wyłączyć:

$('input').attr('readonly', true); // Disable it.
$('input').addClass('text-muted'); // Gray it out with bootstrap.

Włączyć:

$('input').attr('readonly', false); // Enable it.
$('input').removeClass('text-muted'); // Back to normal color with bootstrap.

1

Wyłącz true dla typu danych wejściowych:

W przypadku określonego typu wprowadzania ( np. Wprowadzania typu tekstu )

$("input[type=text]").attr('disabled', true);

Dla wszystkich typów danych wejściowych

$("input").attr('disabled', true);

1
Dzięki temu pomogłem mi wyodrębnić nazwę wejściową. $("input[name=method]").prop('disabled', true);
Harry Bosh

1

to działa dla mnie

$("#values:input").attr("disabled",true);
$("#values:input").attr("disabled",false);

0

Użyłem @gnarf odpowiedzi i dodałem ją jako funkcję

   $.fn.disabled = function (isDisabled) {
     if (isDisabled) {
       this.attr('disabled', 'disabled');
     } else {
       this.removeAttr('disabled');
     }
   };

Następnie użyj tego w ten sposób

$('#myElement').disable(true);

0

2018, bez JQuery (ES6)

Wyłącz wszystkie input:

[...document.querySelectorAll('input')].map(e => e.disabled = true);

Wyłącz za inputpomocąid="my-input"

document.getElementById('my-input').disabled = true;

Pytanie jest z JQuery, to po prostu FYI.




-1
<html>
<body>

Name: <input type="text" id="myText">



<button onclick="disable()">Disable Text field</button>
<button onclick="enable()">Enable Text field</button>

<script>
function disable() {
    document.getElementById("myText").disabled = true;
}
function enable() {
    document.getElementById("myText").disabled = false;
}
</script>

</body>
</html>

1
Z kolejki recenzji : Czy mogę prosić o dodanie dodatkowego kontekstu wokół odpowiedzi. Odpowiedzi zawierające tylko kod są trudne do zrozumienia. Pomoże zarówno pytającemu, jak i przyszłym czytelnikom, czy możesz dodać więcej informacji w swoim poście.
RBT

-1

W jQuery Mobile:

Aby wyłączyć

$('#someselectElement').selectmenu().selectmenu('disable').selectmenu('refresh', true);
$('#someTextElement').textinput().textinput('disable');

Aby włączyć

$('#someselectElement').selectmenu().selectmenu('enable').selectmenu('refresh', true);
$('#someTextElement').textinput('enable');
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.