Aggiungi l'attributo disabilitato all'elemento di input utilizzando Javascript

Ho una casella di input e voglio che sia disabilitata e allo stesso tempo nasconderla per evitare problemi durante il porting del mio modulo.

Finora ho il seguente codice per nascondere il mio input:

$(".shownextrow").click(function() { 
    $(this).closest("tr").next().show().find('.longboxsmall').hide();
});

Questo è l'input che viene nascosto di conseguenza:

<input class="longboxsmall" type="text" />

Come posso anche aggiungere l'attributo disabilitato all'input?

$("input").attr("disabled", true); a partire da ... non lo so più.

È dicembre 2013 e non ho davvero idea di cosa dirti.

Prima era sempre .attr(), poi lo era sempre .prop(), quindi sono tornato qui, ho aggiornato la risposta e l'ho resa più accurata.

Poi, un anno dopo, jQuery ha cambiato idea di nuovo e non voglio nemmeno tenerne traccia.

Per farla breve, a partire da ora, questa è la risposta migliore: "puoi usare entrambi ... ma dipende".

Dovresti invece leggere questa risposta: https://stackoverflow.com/a/5876747/257493

E le loro note di rilascio per quella modifica sono incluse qui:

Né .attr () né .prop () dovrebbero essere usati per ottenere / impostare il valore. Utilizzare invece il metodo .val () (sebbene l'utilizzo di .attr ("value", "somevalue") continuerà a funzionare, come prima di 1.6).

Riepilogo dell'utilizzo preferito

Il metodo .prop () dovrebbe essere usato per attributi / proprietà booleane e per proprietà che non esistono in HTML (come window.location). Tutti gli altri attributi (quelli che puoi vedere nel codice HTML) possono e devono continuare a essere manipolati con il metodo .attr ().

O in altre parole:

".prop = materiale non documentale"

".attr" = documento

...

Possiamo tutti imparare una lezione qui sulla stabilità delle API ...

Codice funzionante dalle mie fonti:

MONDO HTML

<select name="select_from" disabled>...</select>

JS WORLD

var from = jQuery('select[name=select_from]');

//add disabled
from.attr('disabled', 'disabled');



//remove it
from.removeAttr("disabled");

Se stai usando jQuery, ci sono diversi modi per impostare l'attributo disabilitato.

var $element = $(...);
    $element.prop('disabled', true);
    $element.attr('disabled', true); 

    // The following do not require jQuery
    $element.get(0).disabled = true;
    $element.get(0).setAttribute('disabled', true);
    $element[0].disabled = true;
    $element[0].setAttribute('disabled', true);

$(element).prop('disabled', true); //true|disabled will work on all
$(element).attr('disabled', true); 
element.disabled = true;
element.setAttribute('disabled', true);

Tutti i precedenti sono soluzioni perfettamente valide. Scegli quello più adatto alle tue esigenze.

È possibile ottenere l'elemento DOM e impostare direttamente la proprietà disabilitata.

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').hide()[0].disabled = 'disabled';
});

o se ce n'è più di uno, puoi usarli each()per impostarli tutti:

$(".shownextrow").click(function() { 
  $(this).closest("tr").next().show()
          .find('.longboxsmall').each(function() {
               this.style.display = 'none';
               this.disabled = 'disabled';
          });
});

Usa il attr()metodo di jQuery

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');

Dal momento che la domanda era: come fare questo con JS, sto fornendo un'implementazione JS alla vaniglia.

var element = document.querySelector(".your-element-class-goes-here");
// it's a good idea to check whether the element exists
if (element != null && element != undefined) {
  element.disabled = "disabled";
}