Como desativar ou habilitar botões usando JavaScript e JQuery

Você já notou com que frequência o botão de envio não funcionaria até que todos os campos relevantes tenham sido preenchidos em um formulário da web? Essa lógica é implementada determinando o status do botão (ativado ou desativado), dependendo se o campo de entrada é preenchido ou não e depois executar a operação necessária. Se você não tem certeza de como executar isso? Sem problemas!

Este manual explicará o método de ativar e desativar botões com a ajuda de JavaScript e JQuery.

Como desativar ou habilitar botões usando JavaScript e JQuery?

Uma das coisas mais práticas que cada aplicativo da web inclui em seus botões é a facilitadora e incapacitante funcionalidades. Você pode usar o “desabilitado”Atributo para ativar ou desativar os botões em jQuery e JavaScript.

Exemplo 1: Desativar ou habilitar botões usando JavaScript
No arquivo html, primeiro criaremos três botões, o botão onde as ações executarão, uma é para desativar e a outra é para ativar o botão:

Botão
Clique para desativar
Clique para ativar

Vamos definir a função “desabilleButton ()”Para desativar o botão, definindo o valor do atributo desativado para“verdadeiro”:

função desabilleButton ()
documento.getElementById ("botão").desativado = true;

Para ativar o botão, defina o valor da propriedade desativado como “falso”:

função enableButton ()
documento.getElementById ("botão").desativado = false;

A saída correspondente é a seguinte:

Exemplo 2: Desativar ou ativar os botões usando jQuery
Neste exemplo, usaremos o jQuery para desativar e ativar o botão. Para fazer isso, primeiro, crie dois botões em um arquivo html. Um deles é usado para desativar e ativar o outro botão:

Botão
Clique aqui para desativar e para ativar o clique duas vezes

Para usar jQuery, especifique -o “src”Atributo na tag:

Na tag, desative o botão em um único clique, acionando o “cliqueEvento no botão com id “alternar”E defina o valor do“desabilitado”Atributo do primeiro botão para“verdadeiro”. Da mesma forma, no “dblClick”Evento, defina o valor do atributo desativado para“falso"Para ativar o"Botão”Em clique duas vezes:

$ (documento).pronto (function ()
$ ('#alternar').on ('clique', function ()
$ ('#botão').prop ('desativado', true);
);
$ ('#alternar').on ('dblClick', function ()
$ ('#botão').prop ('desativado', false);
);
);

A saída significa que desativamos e habilitamos o botão com sucesso usando o jQuery:

Exemplo 3: Ative o botão desativado usando JavaScript
Agora, habilitaremos o botão desativado depois de inserir algum texto no campo de texto usando JavaScript. Para isso, crie um campo de entrada e um botão de envio com IDs “texto" e "enviar”. O botão Enviar está desativado por padrão, utilizando o atributo desativado:

No arquivo JavaScript, primeiro obteremos os IDs do campo de entrada e do botão e depois chamaremos a função "Statehandle" em "addEventListener”Método, onde definiremos o valor do atributo desativado para“falso“Se o campo de texto estiver vazio, o que indica o botão Desativar; caso contrário, vamos definir como “verdadeiro”, Se o campo de entrada estiver preenchido com qualquer texto e o botão Enviar será ativado:

Deixe input = documento.QuerySelector ("#text");
Let Button = Documento.QuerySelector ("#submeter");
entrada.addEventListener ("alteração", StateHandle);
função stateHandle ()
if (documento.QuerySelector ("#text").valor != "")
botão.desativado = false;

outro
botão.desativado = true;

Saída

Exemplo 4: Ative os botões desativados usando jQuery
Neste exemplo, usaremos o jQuery para permitir que o botão de envio desativado. Para fazer isso, primeiro defina o valor do atributo desativado para “falso”Para desativar o botão enquanto o campo de entrada está vazio. Então, se o campo estiver preenchido com algum texto, defina o valor do atributo desativado como “verdadeiro”, Que permite o botão Enviar:

$ (documento).pronto (function ()
$ ('#Texto').on ('Alterar de entrada', function ()
se ($ (isso).val () != ")
$ ('#envie').prop ('desativado', false);

outro
$ ('#envie').prop ('desativado', true);

);
);

A saída correspondente é mostrada abaixo:

Cobrimos todos os aspectos do botão de habilitação e desativação usando JavaScript e JQuery.

Conclusão

Para ativar e desativar o botão em javascript e jQuery, você pode usar o “desabilitado" propriedade. Para fazer isso, defina o valor do atributo deficiente “verdadeiro" ou "falso”Para desativar ou ativar o botão, respectivamente. Neste manual, explicamos o método de ativar e desativar botões com a ajuda de JavaScript e JQuery.