Disabilitare / abilitare un input con jQuery?

$input.disabled = true;

o

$input.disabled = "disabled";

Qual è il modo standard? E, al contrario, come si abilita un input disabilitato?

jQuery 1.6+

Per modificare la disabledproprietà è necessario utilizzare la .prop()funzione.

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

jQuery 1.5 e precedenti

La .prop()funzione non esiste, ma è .attr()simile:

Imposta l'attributo disabilitato.

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

Per riattivare, utilizzare il metodo corretto .removeAttr()

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

In qualsiasi versione di jQuery

Puoi sempre fare affidamento sull'oggetto DOM effettivo ed è probabilmente un po 'più veloce delle altre due opzioni se hai a che fare solo con un elemento:

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

Il vantaggio di usare il .prop()o.attr() metodi è che è possibile impostare la proprietà per un gruppo di elementi selezionati.

Nota: in 1.6 esiste un .removeProp()metodo che suona molto simile removeAttr(), ma NON DOVREBBE ESSERE UTILIZZATO su proprietà native come'disabled' Estratto dalla documentazione:

Nota: non utilizzare questo metodo per rimuovere proprietà native come selezionate, disabilitate o selezionate. Questo rimuoverà completamente la proprietà e, una volta rimosso, non potrà più essere aggiunto all'elemento. Utilizzare invece .prop () per impostare queste proprietà su false.

In effetti, dubito che ci siano molti usi legittimi per questo metodo, gli oggetti di scena booleani sono fatti in modo tale che dovresti impostarli su false invece di "rimuoverli" come le loro controparti "attributo" in 1.5

Solo per il gusto di nuove convenzioni && che lo rendono adattabile in futuro (a meno che le cose non cambino drasticamente con ECMA6 (????):

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

e

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

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

A volte è necessario disabilitare / abilitare l'elemento del modulo come input o textarea. Jquery ti aiuta a farlo facilmente impostando l'attributo disabilitato su "disabilitato". Ad esempio:

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

Per abilitare l'elemento disabilitato devi rimuovere l'attributo "disabilitato" da questo elemento o svuotare la sua stringa. Ad esempio:

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

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

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

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

o

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

Puoi metterlo da qualche parte globale nel tuo codice:

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

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

E poi puoi scrivere cose come:

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

Se vuoi solo invertire lo stato corrente (come un comportamento pulsante di commutazione):

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

Esistono molti modi per usarli per abilitare / disabilitare qualsiasi elemento :

Approccio 1

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

Approccio 2

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

Se si utilizza jQuery 1.7 o versione successiva, utilizzare prop (), anziché attr ().

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

Se desideri abilitare qualsiasi elemento, devi solo fare l'opposto di quello che hai fatto per disabilitarlo. Tuttavia jQuery fornisce un altro modo per rimuovere qualsiasi attributo.

Approccio 1

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

Approccio 2

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

Approccio 3

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

Ancora una volta, se si utilizza jQuery 1.7 o versione successiva, utilizzare prop (), anziché attr (). Questo è. Ecco come abilitare o disabilitare qualsiasi elemento utilizzando jQuery.

Aggiornamento per il 2018:

Ora non c'è bisogno di jQuery ed è stato un po 'che document.querySelector o document.querySelectorAll(per più elementi) fanno quasi esattamente stesso lavoro di $, oltre a quelli più espliciti getElementById, getElementsByClassName,getElementsByTagName

Disabilitare un campo della classe "input-checkbox"

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

o più elementi

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

È possibile utilizzare il metodo jQuery prop () per disabilitare o abilitare l'elemento del modulo o controllare dinamicamente utilizzando jQuery. Il metodo prop () richiede jQuery 1.6 e versioni successive.

Esempio:

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

Disattivare:

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

Abilitare:

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

Disabilita true per il tipo di input:

Nel caso di un tipo di input specifico ( es. Input del tipo di testo )

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

Per tutti i tipi di tipo di input

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

questo funziona per me

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

Ho usato la risposta di @gnarf e l'ho aggiunta come funzione

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

Quindi utilizzare in questo modo

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

2018, senza JQuery (ES6)

Disabilita tutto input:

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

Disabilita inputconid="my-input"

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

La domanda è con JQuery, è solo FYI.

Approccio 4 (questa è l'estensione della risposta del programmatore selvaggio )

txtName.disabled=1     // 0 for enable

<input id="txtName">

Usa così,

 $( "#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>

In jQuery Mobile:

Per disabilitare

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

Per abilitare

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