Agregar atributo deshabilitado al elemento de entrada usando Javascript

Tengo un cuadro de entrada y quiero que esté deshabilitado y al mismo tiempo ocultarlo para evitar problemas al portar mi formulario.

Hasta ahora tengo el siguiente código para ocultar mi entrada:

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

Esta es la entrada que se oculta como resultado:

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

¿Cómo puedo agregar también el atributo deshabilitado a la entrada?

$("input").attr("disabled", true); a partir de ... No sé más.

Es diciembre de 2013 y realmente no tengo idea de qué decirles.

Primero fue siempre .attr(), luego siempre fue .prop()así, así que volví aquí actualicé la respuesta y la hice más precisa.

Luego, un año después, jQuery volvió a cambiar de opinión y ni siquiera quiero hacer un seguimiento de esto.

En pocas palabras, en este momento, esta es la mejor respuesta: "puede usar ambos ... pero depende".

En su lugar, debería leer esta respuesta: https://stackoverflow.com/a/5876747/257493

Y sus notas de lanzamiento para ese cambio se incluyen aquí:

Ni .attr () ni .prop () deben usarse para obtener / establecer el valor. Use el método .val () en su lugar (aunque usar .attr ("value", "somevalue") continuará funcionando, como lo hizo antes de 1.6).

Resumen de uso preferido

El método .prop () debe usarse para atributos / propiedades booleanas y para propiedades que no existen en html (como window.location). Todos los demás atributos (los que puede ver en el html) pueden y deben seguir siendo manipulados con el método .attr ().

O en otras palabras:

".prop = cosas que no son documentos"

".attr" = material del documento

... ...

¿Podemos todos aprender una lección aquí sobre la estabilidad API ...

Código de trabajo de mis fuentes:

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

Si está utilizando jQuery, existen diferentes formas de configurar el atributo deshabilitado.

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

Todo lo anterior son soluciones perfectamente válidas. Elija el que mejor se adapte a sus necesidades.

Puede obtener el elemento DOM y establecer la propiedad deshabilitada directamente.

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

o si hay más de uno, puede usar each()para configurarlos todos:

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

Solo usa el attr()método de jQuery

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

Como la pregunta era cómo hacer esto con JS, estoy proporcionando una implementación JS de vainilla.

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";
}