Habilitar ou desabilitar input com JavaScript

Neste artigo você vai aprender a como habilitar ou desabilitar input com JavaScript, manipulando o DOM para alterar o atributo

Fala programador(a), beleza? Bora aprender mais sobre JavaScript, formulários e manipulação de DOM!

Há algumas situações que precisamos desabilitar um input para um usuário, por exemplo: quando o campo não precisa ser mais preenchido

Para fazer esta ação podemos seleciona o elemento a partir de algum método, como o querySelector

E alterar a propriedade disabled do input para true ou false

Sendo true o input desabilitado e false ele habilitado, que é o comportamento padrão

Veja um exemplo prático da solução do problema:

<input type="text" id="teste">

Vamos utilizar o HTML acima como exemplo para a nossa estrutura, agora segue o JavaScript necessário:

var input = document.querySelector("#teste");

input.disabled = true;

Veja como é simples, apenas selecionamos o elemento e depois alteramos o valor da propriedade disabled

Assim não conseguimos mais inserir dados ou alterar dados do campo, interessante não é?

Note que o atribudo disable faz com que os dados não sejam enviados pelo formulário, se você precisa enviar utilize o atributo readonly

Conclusão

Neste artigo você viu como habilitar ou desabilitar input com JavaScript

Precisamos apenas selecionar o elemento com algum método de DOM:

• querySelector
• getElementById
• getElementsByClassName

São alguns dos exemplos válidos e depois alterar a propriedade disabled para true ou false, onde true é o input desabilitado e false é o comportamento normal do campo

Note também que o atributo disabled não faz o envio de dados ao backend, apenas o readonly tem essa funcionalidade

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube