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

$input.disabled = true;

lub

$input.disabled = "disabled";

Jaki jest standardowy sposób? I odwrotnie, jak włączyć wyłączone wejście?

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

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');   
});

    // 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

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

lub

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

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();

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

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

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.

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);

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>

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.

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);

to działa dla mnie

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

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);

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.

Podejście 4 (jest to rozszerzenie odpowiedzi dzikiego kodera )

txtName.disabled=1     // 0 for enable

<input id="txtName">

Użyj tego,

 $( "#id" ).prop( "disabled", true );

 $( "#id" ).prop( "disabled", false );

<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>

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');