No JavaScript, geralmente encontramos páginas ou formas da web com certos requisitos para preencher um formulário. Por exemplo, é necessário preencher um determinado campo de entrada com um número específico de caracteres. Nesses casos, a funcionalidade de desativar um botão em JavaScript baseada em condição é muito útil para garantir a correção e os regulamentos dos dados de um elemento específico dados.

Este blog orientará sobre desativar um botão em JavaScript condicionalmente.

Como desativar um botão em JavaScript com base na condição?

Para desativar um botão em JavaScript com base na condição, as seguintes abordagens podem ser utilizadas:

• ““desabilitado”Propriedade com“comprimento" propriedade
• ““inclui ()" e "documento.getElementById ()" métodos

Passar pelos métodos discutidos um por um!

Método 1: Desative um botão em JavaScript com base na condição usando propriedades "desativadas" e "comprimento"

O "desabilitadoA propriedade indica se o controle está desativado e, em caso afirmativo, não aceita cliques e o ““comprimento”Propriedade especifica o comprimento de uma string. Essas propriedades serão utilizadas para desativar um botão na condição. Por exemplo, um comprimento específico dos caracteres é inserido no campo de entrada.

Visão geral o exemplo a seguir para entender o conceito declarado.

Exemplo

Em primeiro lugar, inclua um tipo de entrada chamado “texto”E um valor de espaço reservado. Em seguida, adicione um botão A dentro da div e criada:

Mostrar

Desativar o botão

Mova para o arquivo JavaScript e busque os elementos especificados usando o “documento.QuerySelector ()”Método:

Let Button = Documento.QuerySelector ('Button');
Deixe input = documento.QuerySelector ('entrada');
Deixe a saída = documento.QuerySelector ('H1');

Depois disso, inclua um ouvinte de evento chamado “clique”E anexe -o ao botão especificado, que preencherá o valor do campo de entrada quando o botão for clicado:

botão.addEventListener ('click', () =>
saída.INNERTEXT = entrada.valor;
);

Da mesma forma, um evento chamado “keyUp”Será anexado ao campo de entrada, que desencadeará a função dada de tal maneira que se o comprimento do valor do campo de entrada se tornar maior que“5”, O botão será desativado:

entrada.addEventListener ('keyUp', () =>
if (entrada.valor.comprimento> 5)
botão.desativado = true

outro
botão.desativado = false;

);

Saída

Método 2: Desative um botão em JavaScript com base em uma condição específica usando "inclui ()" e documento.getElementById () métodos

O "getElementById ()”O método acessa um elemento com um valor especificado em seu argumento, e o“inclui ()”O método retorna true se uma string específica contiver um valor de string especificado. Esses métodos podem ser aplicados para buscar o ID de entrada e colocar uma condição em um caractere especificado no campo de entrada.

Sintaxe

documento.getElementById (ElementId)

Aqui, "ElementId”Refere -se ao ID específico de um elemento HTML.

Inclui (SearchValue)

Na sintaxe acima, “SearchValue”Refere -se ao valor que precisa ser pesquisado.

O exemplo a seguir demonstra o conceito declarado.

Exemplo

Primeiro, inclua um tipo de entrada chamado “texto" e um "onkeyupEvento acessando a função chamada “desabilitarbutão (isto)" onde "esse”Em seu argumento refere -se a um objeto:

Da mesma forma, inclua um tipo de entrada chamado “enviar”Com um valor desativado como seguinte:

Agora, declare uma função chamada “desabillebutton (txt)" onde "TXT”Está se referindo ao objeto. Busque o elemento do tipo de entrada usando o documento.getElementById () método. Por fim, aplique uma condição para desativar o botão especificando um personagem específico “!”Usando o“inclui ()”Método. Isso funcionará de tal maneira que, se o caractere especificado for detectado no campo de entrada, o botão será desativado:

functionDisableButton (txt)
var Bt = documento.getElementById ('submeter');
se (desativar.valor.inclui ('!'))
bt.desativado = true

else bt.desativado = false;

Saída

Oferecemos os métodos mais simples para desativar um botão em JavaScript.

Conclusão

Para desativar um botão em JavaScript com base na condição, utilize o “desabilitado”Propriedade com a“comprimento”Propriedade, que aplicará a funcionalidade com base no comprimento dos caracteres de entrada, ou no“inclui ()”Método com“documento.getElementById ()”Método para acessar o campo de entrada e aplicar uma condição no caractere especificado no campo de entrada. Este manual forneceu o procedimento para desativar um botão em javascript com base na condição adicionada.