javascript - with - jquery disable object




Disabilita/abilita un input con jQuery? (11)

2018, senza JQuery (ES6)

Disattiva tutti gli input :

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

Disabilita input con id="my-input"

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

La domanda è con JQuery, è solo FYI.

$input.disabled = true;

o

$input.disabled = "disabled";

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


jQuery 1.6+

Per modificare la proprietà disabled devi 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 .removeAttr() , 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 delle 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 .prop() o .attr() è che è possibile impostare la proprietà per un gruppo di elementi selezionati.

Nota: in 1.6 esiste un metodo .removeProp() che somiglia molto a removeAttr() , ma 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


Aggiornamento per il 2018:

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

Ci sono un paio di modi per usarli è possibile 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 (), anziché 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.


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

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

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

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

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

Disabilita true per il tipo di input:

In caso di un tipo di input specifico (ad esempio immissione di testo )

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

Per tutti i tipi di tipo di input

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

    // 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 a: http://garmoncheg.blogspot.fr/2011/07/how-to-disableenable-element-with.html


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






html-input