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

Tylko ze względu na nowe konwencje & & czyniąc go elastycznym w przyszłości (chyba że coś się drastycznie zmieni z ECMA6 (????):

$(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 łatwo to zrobić z ustawieniem atrybutu disabled na "disabled". 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 łańcuch. Dla np.:

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

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

Zobacz: 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 (jak zachowanie przycisku przełączania):

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

Aktualizacja na rok 2018:

Teraz nie ma potrzeby jQuery i minęło trochę czasu od document.querySelector lub document.querySelectorAll (dla wielu elementów) wykonują prawie dokładnie to samo zadanie co$, plus bardziej wyraźne 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>

Istnieje kilka sposobów na włączenie / wyłączenie dowolnego elementu :

Podejście 1

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

Podejście 2

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

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

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

Jeśli chcesz włączyć dowolny element, musisz 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 w wersji 1.7 lub wyższej, użyj prop () zamiast attr (). Tak. W ten sposób włączasz lub wyłączasz dowolny element za pomocą jQuery.

Disable:

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

Enable:

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

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

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

Następnie użyj 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 input z id="my-input"

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

pytanie brzmi z JQuery, tak dla twojej informacji.

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

Dla wyłączenia

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

Dla enable

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

Wyłącz true dla typu wejścia:

W przypadku określonego typu wejścia ( Ex. Text type input )

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

Dla wszystkich typów danych wejściowych

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