Adicionar atributo desativado ao elemento de entrada usando Javascript

Eu tenho uma caixa de entrada e quero que ela seja desativada e, ao mesmo tempo, oculte-a para evitar problemas ao portar meu formulário.

Até agora, tenho o seguinte código para ocultar minha entrada:

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

Esta é a entrada que fica oculta como resultado:

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

Como também posso adicionar o atributo desativado à entrada?

$("input").attr("disabled", true); a partir de ... não sei mais.

É dezembro de 2013 e eu realmente não tenho ideia do que lhe dizer.

Primeiro era sempre .attr(), depois era sempre .prop(), então eu voltei aqui, atualizei a resposta e a tornei mais precisa.

Então, um ano depois, o jQuery mudou de idéia novamente e nem quero acompanhar isso.

Para encurtar a história, a partir de agora, esta é a melhor resposta: "você pode usar os dois ... mas isso depende".

Você deve ler esta resposta: https://stackoverflow.com/a/5876747/257493

E suas notas de versão para essa mudança estão incluídas aqui:

Nem .attr () nem .prop () devem ser usados ​​para obter / configurar o valor. Use o método .val () (embora o uso de .attr ("value", "somevalue") continue funcionando, como antes de 1.6).

Resumo de uso preferido

O método .prop () deve ser usado para atributos / propriedades booleanos e para propriedades que não existem em html (como window.location). Todos os outros atributos (aqueles que você pode ver no html) podem e devem continuar sendo manipulados com o método .attr ().

Ou em outras palavras:

".prop = material que não é documento"

".attr" = material do documento

... ...

Que todos possamos aprender uma lição aqui sobre a estabilidade da API ...

Código de trabalho das minhas fontes:

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

Se você estiver usando o jQuery, existem algumas maneiras diferentes de definir o atributo desativado.

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

Todas as opções acima são soluções perfeitamente válidas. Escolha aquele que melhor se adapte às suas necessidades.

Você pode obter o elemento DOM e definir a propriedade desabilitada diretamente.

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

ou, se houver mais de um, você pode usar each()para definir todos eles:

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

Basta usar o attr()método do jQuery

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

Como a pergunta estava perguntando como fazer isso com o JS, estou fornecendo uma implementação de baunilha JS.

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