Pytanie Wyłączyć / włączyć wejście z jQuery?


$input.disabled = true;

lub

$input.disabled = "disabled";

Jaki jest standardowy sposób? I odwrotnie, w jaki sposób włączasz wyłączone wejście?


1913
2017-09-12 05:21


pochodzenie


możliwy duplikat Usunąć wyłączony atrybut za pomocą JQuery? - user2381114
znalazłem Zależy od wtyczka, która może ci się przydać - Ben


Odpowiedzi:


jQuery 1.6+

Żeby zmienić disabled właściwość powinieneś użyć .prop() funkcjonować.

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

jQuery 1.5 i poniżej

The .prop() funkcja nie istnieje, ale .attr() robi podobne:

Ustaw wyłączony atrybut.

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

Aby ponownie włączyć, właściwą metodą jest użycie .removeAttr()

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

W dowolnej wersji jQuery

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

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

Zaleta korzystania z .prop() lub .attr() metody polega na tym, że możesz ustawić właściwość dla kilku wybranych elementów.


Uwaga: W 1.6 jest .removeProp() metoda, która brzmi bardzo podobnie removeAttr(), ale to NIE NALEŻY STOSOWAĆ na rodzime właściwości, takie jak 'disabled'  Fragment dokumentacji:

Uwaga: tej metody nie należy używać w celu usuwania natywnych właściwości, 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 ponownie dodać do elementu. Użyj .prop (), aby ustawić te właściwości na false.

Prawdę mówiąc, wątpię, aby było wiele legalnych zastosowań tej metody, boolean rekwizyty są robione w taki sposób, że powinieneś ustawić je na false, zamiast "usuwać" je jak ich odpowiedniki "atrybutów" w 1.5.


3293
2017-09-12 05:23



Na marginesie pamiętaj, że jeśli chcesz wyłączyć WSZYSTKIE kontrolki wprowadzania formularzy - włącznie. pola wyboru, radia, textareas itp. - musisz wybrać ':input', nie tylko 'input'. Ten ostatni wybiera tylko rzeczywiste elementy <input>. - Cornel Masson
@CornelMasson input,textarea,select,button jest nieco lepszy w użyciu niż :input - :input jako selektor jest dość nieefektywny, ponieważ musi wybrać * następnie przeprowadź pętlę nad każdym elementem i filtruj według zmiennej - jeśli przekażesz 4 selektory zmiennej, to jest to DUŻO szybciej. Również, :input nie jest standardowym selektorem CSS, więc możliwe są przyrosty wydajności, które są możliwe querySelectorAll są zgubieni - gnarf
Czy to po prostu uniemożliwia użytkownikowi dostęp do niego, czy faktycznie usuwa go z żądania sieci? - OneChillDude
Używając .removeProp("disabled") powodowało problem "całkowitego usunięcia i nieuzyskania usługi", jak wskazał @ThomasDavidBaker, w przypadku niektórych przeglądarek, takich jak Chrome, podczas gdy w przypadku Firefoksa działało poprawnie. Powinniśmy tu być naprawdę ostrożni. Zawsze używaj .prop("disabled",false) zamiast - Sandeepan Nath
Ani .prop, ani .attr nie wystarczają do wyłączenia elementów kotwiących; .prop nie wyszarzeczy nawet 'control' (.attr robi, ale href jest nadal aktywny). Trzeba także dodać obsługę zdarzeń kliknięcia, która wywołuje metodę preventDefault (). - Jeff Lowery


Tylko ze względu na nowe konwencje i możliwość dostosowania do przyszłych działań (chyba że sytuacja zmieni się drastycznie w ECMA6 (????):

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

i

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

51
2017-07-18 11:51



Jike! Czemu $(document).on('event_name', '#your_id', function() {...}) zamiast $('#your_id').on('event_name', function() {...}). Jak opisano w Dokumentacja jQuery .on () ten pierwszy używa delegacji i słucha wszystko  event_name wydarzenia, które się pojawiają document i sprawdza je pod kątem dopasowania #your_id. Ten ostatni słucha konkretnie $('#your_id') tylko wydarzenia i które lepiej się skalują. - Peter V. Mørch
Ta pierwsza działa dla elementów wstawionych do DOM w dowolnym momencie, ta ostatnia tylko dla tych, które zachowały się w tym momencie. - crazymykl
@ crazymykl Prawidłowo, ale nie powinieneś dodawać elementów o identyfikatorze już obecnym na twojej stronie. - SepehrM


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

Czasami trzeba wyłączyć / włączyć element formularza, taki jak input lub textarea. Jquery pomaga łatwo to zrobić, ustawiając wyłączony atrybut na "wyłączony". Dla np .:

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

Aby włączyć wyłączony element, musisz usunąć atrybut "disabled" 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', '');

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


25
2018-04-07 10:27





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

lub

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

12
2017-09-06 14:53



Oczywiście pytanie o jQuery i to zmienia stan w prostym JavaScript, ale działa. - basic6
To zmienia stan w JavaScript, ale nadal używa selektora jQuery, aby uzyskać pierwsze wejście. - cjsimon
Ale nie sądzę, że robimy tutaj encyklopedię jquery, jeśli odpowiedź działa, jest dobra - Sajjad Shirazy
To jest dobra odpowiedź, dziękuję. - Ali Karaca


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 napisać takie rzeczy jak:

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

7
2017-10-18 13:42



Podczas owijania funkcjonalność jest przydatna, powinieneś był użyć prop i nie  attr z disabled właściwość do poprawnego działania (zakładając jQuery w wersji 1.6 lub wyższej). - Gone Coding
@TrueBlueAussie Co to jest wadą korzystania attr ? Używam powyższego kodu w niektórych projektach i o ile pamiętam, działa dobrze - Nicolae Surdu
Oczywistymi wyjątkami są kontrole z właściwościami za kulisami. Najbardziej znanym jest checked właściwość pól wyboru. Za pomocą attr nie da takiego samego wyniku. - Gone Coding
To "$ (". MyInputs "). Enable ();" nie działają dla mnie, ale to "$ (el) .removeAttr (" wyłączone ");" działa bardzo dobrze, dzięki - CrsCaballero


Jeśli chcesz po prostu odwrócić bieżący stan (np. Zachowanie przycisku przełączającego):

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

4
2017-09-12 16:28





Aktualizacja na 2018:

Teraz nie ma potrzeby korzystania z jQuery i minęło już trochę czasu document.querySelector  lub document.querySelectorAll (dla wielu elementów) wykonują prawie dokładnie tę samą pracę, co $, oraz bardziej jawne 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);

2
2018-02-11 18:29



pytanie w szczególności pyta o jQuery ... ale równie dobrze twoje oświadczenie jest poprawne i warto wiedzieć, że jQuery tego nie robi potrzeba do użycia w tym przypadku, gdy istnieje wiele elementów. - ADyson


Możesz użyć metody jQuery prop () do dynamicznego wyłączania lub włączania elementu formularza lub kontrolki za pomocą jQuery. Metoda prop () wymaga jQuery w wersji 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>

2
2017-08-02 10:26



Oszczędzanie życia ... dzięki @SPARTAN - wild coder