Cómo deshabilitar o habilitar botones usando JavaScript y jQuery

¿Alguna vez ha notado con qué frecuencia, el botón Enviar no funcionaría hasta que todos los campos relevantes se hayan completado en un formulario web? Esta lógica se implementa determinando el estado del botón (habilitado o deshabilitado) dependiendo de si el campo de entrada se llena o no y luego realiza la operación requerida. Si no está seguro de cómo realizar eso? No hay problema!

Este manual explicará el método de habilitar y deshabilitar los botones con la ayuda de JavaScript y JQuery.

Cómo deshabilitar o habilitar botones usando JavaScript y jQuery?

Una de las cosas más prácticas que cada aplicación web incluye en sus botones es las funcionalidades habilitadoras e incapacitantes. Puedes usar el "desactivado"Atributo para habilitar o deshabilitar los botones en jQuery y JavaScript.

Ejemplo 1: Deshabilitar o habilitar botones usando JavaScript
En el archivo HTML, primero crearemos tres botones, el botón donde se realizarán las acciones, uno es para deshabilitar y el otro es para habilitar el botón:

Botón
Haga clic para deshabilitar
Haga clic para habilitar

Definiremos la función "DisableButton ()"Para deshabilitar el botón configurando el valor del atributo deshabilitado a"verdadero":

función disableButton ()
documento.getElementById ("botón").discapacitado = true;

Para el botón habilitar, configure el valor de la propiedad deshabilitada en "FALSO":

function hableButton ()
documento.getElementById ("botón").discapacitado = falso;

La salida correspondiente es la siguiente:

Ejemplo 2: Desactivar o habilitar botones usando jQuery
En este ejemplo, usaremos jQuery para deshabilitar y habilitar el botón. Para hacerlo, primero, cree dos botones en un archivo HTML. Uno de ellos se usa para deshabilitar y habilitar el otro botón:

Botón
Haga clic aquí para deshabilitar y para habilitar doble clic en él

Para usar jQuery, especifíquelo como "SRC"Atributo en la etiqueta:

En la etiqueta, deshabilite el botón en un solo clic activando el "hacer clic"Evento en el botón con ID"palanca"Y establecer el valor del"desactivado"Atributo del primer botón a"verdadero". Del mismo modo, en el "dblclick"Evento, establezca el valor del atributo deshabilitado a"FALSO"Para habilitar el"Botón"En doble clic:

$ (documento).Ready (function ()
$ ('#toggle').en ('hacer clic', function ()
$ ('#botón').prop ('discapacitado', verdadero);
);
$ ('#toggle').on ('dblClick', function ()
$ ('#botón').prop ('discapacitado', falso);
);
);

La salida significa que deshabilitamos con éxito y habilitamos el botón usando jQuery:

Ejemplo 3: Habilite el botón Desactivado usando JavaScript
Ahora, habilitaremos el botón deshabilitado después de ingresar algún texto en el campo de texto usando JavaScript. Para esto, cree un campo de entrada y un botón de envío con IDS "texto" y "entregar". El botón Enviar está deshabilitado de forma predeterminada utilizando el atributo deshabilitado:

En el archivo JavaScript, primero obtendremos los ID del campo de entrada y el botón y luego llamaremos a la función "muñeca estatal" en "AddEventListener"Método, donde estableceremos el valor del atributo deshabilitado a"FALSO"Si el campo de texto está vacío, lo que indica el botón Desactivar; De lo contrario, lo estableceremos como "verdadero", Si el campo de entrada se llena con algún texto y el botón Enviar estará habilitado:

dejar entrada = documento.QuerySelector ("#text");
Let Button = documento.QuerySelector ("#enviar");
aporte.addEventListener ("Change", StateHandle);
function stateHandle ()
if (documento.QuerySelector ("#text").valor != "")
botón.discapacitado = falso;

demás
botón.discapacitado = true;

Producción

Ejemplo 4: Habilite los botones de desactivado con jQuery
En este ejemplo, utilizaremos jQuery para habilitar el botón Enviar envío. Para hacerlo, primero establezca el valor del atributo deshabilitado en "FALSO"Para deshabilitar el botón mientras el campo de entrada está vacío. Luego, si el campo se llena con algún texto, establezca el valor del atributo deshabilitado en "verdadero", Que habilita el botón Enviar:

$ (documento).Ready (function ()
$ ('#Text').en ('Input Change', function ()
if ($ (esto).val () != ")
$ ('#enviar').prop ('discapacitado', falso);

demás
$ ('#enviar').prop ('discapacitado', verdadero);

);
);

La salida correspondiente se muestra a continuación:

Hemos cubierto todos los aspectos del botón habilitador y desactivado usando JavaScript y jQuery.

Conclusión

Para habilitar y deshabilitar el botón en JavaScript y JQuery, puede usar el "desactivado" propiedad. Para hacerlo, establezca el valor del atributo deshabilitado "verdadero" o "FALSO"Deshabilitar o habilitar el botón, respectivamente. En este manual, hemos explicado el método de habilitar y deshabilitar los botones con la ayuda de JavaScript y jQuery.