Adicionar atributo desativado ao elemento de entrada usando Javascript

141

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?

user342391
fonte

Respostas:

306

$("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 ...

Incógnito
fonte
3
+1 para fazer o texto update grande o suficiente para eu prestar atenção
Vael Victus
@VaelVictus Não é tão rápido. Lamento dizer que eles mudaram novamente um ano depois que eu publiquei isso ... e eu esqueci essa resposta. Leia esta resposta: stackoverflow.com/a/5876747/257493
Incognito
1
Essa diferenciação de documento / não-documento entre .prop e .attr é infinitamente útil e nunca vi o contexto enquadrado de maneira tão sucinta antes. Muito apreciado!
unrivaledcreations
51

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");
Mircea Stanciu
fonte
2
Como uma observação para as pessoas que vêm do Google, diretamente do jQuery :As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method
Erenor Paz
16

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);
iConnor
fonte
Que tal $element.eq(0)[0].disabled = true;? :-P
qwertynl
1
Sim, isso é avançado demais para mim, não vou tão longe para melhorar o desempenho.
IConnor
+1. Embora seja um pouco redundante. Se você estiver lidando com um NodeList / array de elementos, é tolice selecioná-los pelo índice dessa maneira. A iteração ou simplesmente selecionar apenas o elemento necessário faz mais sentido.
13
$(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.


fonte
1
Obrigado por fornecer uma solução que não requer jQuery.
Elias Zamaria
12

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

Basta usar o attr()método do jQuery

$(this).closest("tr").next().show().find('.longboxsmall').attr('disabled', 'disabled');
Gabe
fonte
3
e remover estado desativado usando.removeAttr('disabled');
ruhong
2

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

Viktor
fonte