it-swarm.it

Disabilita/abilita un input con jQuery?

$input.disabled = true;

o

$input.disabled = "disabled";

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

2099
omg

jQuery 1.6+

Per cambiare la proprietà disabled dovresti usare la funzione .prop() .

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

jQuery 1.5 e sotto

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

Imposta l'attributo disabilitato.

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

Per abilitare nuovamente, il metodo corretto è usare .removeAttr()

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

In qualsiasi versione di jQuery

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

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

Il vantaggio dell'utilizzo dei metodi .prop() o .attr() è che è possibile impostare la proprietà per un gruppo di elementi selezionati.


Nota: In 1.6 c'è un .removeProp() metodo che suona molto come removeAttr(), ma it NON DEVE ESSERE UTILIZZATO su proprietà native come 'disabled' Estratto dalla documentazione:

Nota: non utilizzare questo metodo per rimuovere proprietà native come selezionato, disabilitato o selezionato. Questo rimuoverà completamente la proprietà e, una volta rimosso, non può essere aggiunto di nuovo all'elemento. Usa .prop () per impostare invece queste proprietà su false.

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

3564
gnarf

Solo per nuove convenzioni e per renderlo 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');   
});
54
geekbuntu
    // 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 è necessario rimuovere l'attributo "disabled" da questo elemento o svuotare la sua stringa. Ad esempio:

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

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

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

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

o

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

Puoi metterlo da qualche parte nel tuo codice globale:

$.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();
7
Nicu Surdu

Se si desidera semplicemente invertire lo stato corrente (come un comportamento del pulsante di attivazione/disattivazione):

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

Ci sono 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 versione 1.7 o successiva, utilizzare prop () invece di attr ().

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

Se si desidera abilitare qualsiasi elemento, è sufficiente fare l'opposto di ciò che si è 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");

Di nuovo, se stai usando la versione jQuery 1.7 o successiva, usa prop (), invece di attr (). Questo è. Questo è come abilitare o disabilitare qualsiasi elemento usando jQuery.

3
wild coder

È possibile utilizzare il metodo jQuery prop () per disabilitare o abilitare l'elemento del modulo o il controllo in modo dinamico 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>
2
SPARTAN

Aggiornamento per il 2018:

Ora non c'è bisogno di jQuery ed è passato un po 'di tempo perché document.querySelector o document.querySelectorAll (per più elementi) fanno quasi esattamente lo stesso lavoro di $, più quelli 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);
2
Pawel

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.
1
Tomer Ben David

Usa così,

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

    $( "#id" ).prop( "disabled", false );
0
Abdus Salam Azad

questo funziona per me

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

Disabilita true per il tipo di input:

In caso di un tipo di input specifico ( Ex. Input testo type )

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

Per tutti i tipi di tipo di input

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

Ho usato la risposta @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);
0
Imants Volkovs

2018, senza JQuery (ES6)

Disabilita tutti input:

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

Disabilita input con id="my-input"

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

La domanda è with JQuery, è solo FYI.

0
rap-2-h