En JavaScript, a menudo nos encontramos con páginas web o formularios que tienen ciertos requisitos para llenar un formulario. Por ejemplo, se requiere llenar un cierto campo de entrada con un número específico de caracteres. En tales casos, la funcionalidad de deshabilitar un botón en JavaScript basado en la condición es muy útil para garantizar la corrección y las regulaciones de los datos de un elemento específicos de datos.

Este blog guiará sobre deshabilitar un botón en JavaScript condicionalmente.

Cómo deshabilitar un botón en JavaScript basado en la condición?

Para deshabilitar un botón en JavaScript basado en la condición, se pueden utilizar los siguientes enfoques:

• "desactivado"Propiedad con"longitud" propiedad
• "Incluye ()" y "documento.getElementById ()" métodos

Pasar por los métodos discutidos uno por uno!

Método 1: Deshabilite un botón en JavaScript basado en la condición utilizando propiedades "deshabilitadas" y "longitud"

El "desactivado"La propiedad indica si el control está deshabilitado y, de ser así, no acepta clics y el"longitud"La propiedad especifica la longitud de una cadena. Estas propiedades se utilizarán para deshabilitar un botón en la condición. Por ejemplo, se ingresa una longitud específica de caracteres en el campo de entrada.

Descripción general El siguiente ejemplo para comprender el concepto declarado.

Ejemplo

En primer lugar, incluya un tipo de entrada llamado "texto"Y un valor de marcador de posición. Luego, agregue un botón un encabezado dentro del Div creado:

Espectáculo

Desactivar el botón

Muévase al archivo JavaScript y obtenga los elementos especificados utilizando el "documento.QuerySelector ()" método:

Let Button = documento.QuerySelector ('botón');
dejar entrada = documento.QUERYSELECTER ('Entrada');
Dejar de salida = documento.QuerySelector ('H1');

Después de eso, incluya un oyente de eventos llamado "hacer clic"Y adjunte al botón especificado, que completará el valor del campo de entrada cuando se haga clic en el botón:

botón.addEventListener ('click', () =>
producción.inntext = entrada.valor;
);

Del mismo modo, un evento llamado "tecla Arriba"Se unirá al campo de entrada, que activará la función dada de tal manera que si la longitud del valor del campo de entrada se vuelve mayor que"5", El botón se deshabilitará:

aporte.addEventListener ('KeyUp', () =>
if (entrada.valor.longitud> 5)
botón.discapacitado = verdadero

demás
botón.discapacitado = falso;

);

Producción

Método 2: Deshabilite un botón en JavaScript basado en una condición particular usando "Incluye ()" y documento.getElementById () métodos

El "getElementById ()"El método accede a un elemento con un valor especificado en su argumento, y el"Incluye ()El método "devuelve verdadero si una cadena en particular contiene un valor de cadena especificado. Estos métodos se pueden aplicar para obtener el ID de entrada y colocar una condición en un carácter especificado en el campo de entrada.

Sintaxis

documento.getElementById (ElementId)

Aquí, "elemento"Se refiere a la identificación específica de un elemento HTML.

Incluye (SearchValue)

En la sintaxis anterior, "Searchvalue"Se refiere al valor que debe buscarse.

El siguiente ejemplo demuestra el concepto declarado.

Ejemplo

Primero, incluya un tipo de entrada llamado "texto" y un "OnKeyUp"Evento acceder a la función nombrada"Desactivar Button (esto)" dónde "este"En su argumento se refiere a un objeto:

Del mismo modo, incluya un tipo de entrada llamado "entregar"Con un valor deshabilitado de la siguiente manera:

Ahora, declare una función llamada "DISPLAYBUTTON (TXT)" dónde "TXT"Se refiere al objeto. Obtenga el elemento de tipo de entrada usando el documento.método getElementById (). Finalmente, aplique una condición para deshabilitar el botón especificando un personaje en particular "!" utilizando el "Incluye ()" método. Esto funcionará de tal manera que si el carácter especificado se detecta en el campo de entrada, el botón se deshabilitará:

functionDisableButton (txt)
var bt = documento.getElementById ('enviar');
Si (desactivar.valor.Incluye ('!'))
bt.discapacitado = verdadero

else bt.discapacitado = falso;

Producción

Hemos ofrecido los métodos más simples para deshabilitar un botón en JavaScript.

Conclusión

Para deshabilitar un botón en JavaScript basado en la condición, utilice el "desactivado"Propiedad con el"longitud"Propiedad, que aplicará la funcionalidad basada en la longitud de los caracteres de entrada, o el"Incluye ()"Método con"documento.getElementById ()"Método para acceder al campo de entrada y aplicar una condición en el carácter especificado en el campo de entrada. Este manual proporcionó el procedimiento para deshabilitar un botón en JavaScript basado en la condición adicional.