Advertisement
  1. Code
  2. JavaScript

Cómo habilitar o deshabilitar un botón con JavaScript: jQuery vs Vanilla

by
Read Time:4 minsLanguages:

Spanish (Español) translation by Marjan (you can also view the original English article)

En este artículo, analizaremos cómo puedes habilitar o deshabilitar un botón con JavaScript. Primero, veremos cómo funciona en JavaScript vanilla y más adelante veremos cómo hacerlo con jQuery.

JavaScript es una de las tecnologías centrales de la web. La mayoría de los sitios web lo utilizan y todos los navegadores web modernos lo admiten sin necesidad de complementos.  En esta serie, discutimos diferentes consejos y trucos que te ayudarán en tu desarrollo diario de JavaScript.

Cuando trabajas con JavaScript, la mayoría de las veces necesita habilitar o deshabilitar un botón en función de algunas acciones. Por lo general, cuando trabajas con formularios, deseas mantener el botón de envío deshabilitado hasta que un usuario complete todos los campos obligatorios en un formulario.  Una vez que un usuario llena todos los campos obligatorios, te gustaría habilitarlo automáticamente para que un usuario pueda hacer clic en un botón para enviar el formulario.

En HTML, un elemento de botón tiene su propio estado y, por lo tanto, puedes mantenerlo habilitado o deshabilitado. Por ejemplo, cuando se carga un formulario, puedes mantener un botón en estado deshabilitado. Más adelante, puedes habilitarlo con la ayuda de JavaScript.

Hoy, analizaremos cómo puedes habilitar o deshabilitar un botón con JavaScript con un par de ejemplos del mundo real.

Habilitar o deshabilitar un botón con JavaScript vainilla

En esta sección, analizaremos un ejemplo del mundo real, que demuestra cómo puedes habilitar o deshabilitar un botón con JavaScript vanilla.

Veamos el siguiente ejemplo.

En el ejemplo anterior, hemos creado un formulario muy simple que tiene un par de campos de texto junto con un botón de envío.  Es importante tener en cuenta que cuando se carga un formulario, el botón de envío está en estado deshabilitado. Hemos utilizado la propiedad de inhabilitado para establecer el estado predeterminado del botón de envío en inhabilitado.

A continuación, definimos el evento onchange en los campos de entrada de nombre de usuario y contraseña. Entonces, cuando un usuario cambia el valor de estos campos, desencadenaría el evento onchange, que finalmente llama a la función toggleButton.  En la función toggleButton, estamos verificando si un usuario ha ingresado valores en ambos campos obligatorios.  Si ese es el caso, estableceremos la propiedad deshabilitada del botón de envío en falso, lo que eventualmente habilita el botón de envío para que un usuario pueda hacer clic en él.  Por otro lado, si el campo de nombre de usuario o contraseña está en blanco, estableceremos la propiedad deshabilitada en verdadero, lo que deshabilita el botón de envío para que un usuario no pueda hacer clic en él.

En el ejemplo anterior, usamos un botón de envío de entrada, pero también puedes usar un botón HTML como se muestra en el siguiente ejemplo.

Así es como puedes usar JavaScript vanilla para habilitar o deshabilitar un botón. En la siguiente sección, veremos cómo puedes usar la biblioteca jQuery.

Habilitar o deshabilitar un botón con jQuery

En esta sección, discutiremos cómo puede cambiar el estado de un botón con la ayuda de la biblioteca jQuery.

Revisemos el ejemplo que acabamos de discutir en la sección anterior.

En primer lugar, hemos cargado la biblioteca jQuery para que podamos usarla en nuestra función. La única diferencia en el ejemplo anterior es que usamos el método attr del objeto jQuery para alterar el estado de un botón.

El método attr del objeto jQuery se usa para establecer u obtener el valor del atributo específico de un elemento. Si lo usas con un solo argumento, se usa para obtener el valor del atributo.  Por otro lado, si lo usas con dos argumentos, se usa para establecer el valor del atributo. En nuestro caso, lo usamos para establecer el valor del atributo deshabilitado de un botón. Aparte de eso, todo es igual.

Si estás usando jQuery 1.5+, deberás usar el método prop en lugar del método attr como se muestra en el siguiente fragmento.

Alternativamente, si deseas eliminar cualquier atributo de un elemento, también puedes usar el método removeAttr del objeto jQuery como se muestra en el siguiente fragmento. Tendría el mismo resultado que si hubieras establecido el atributo deshabilitado en falso.

Entonces, estas son las diferentes formas en que puedes usar jQuery para habilitar o deshabilitar un botón.

Conclusión

Hoy, discutimos cómo puedes habilitar o deshabilitar un botón en JavaScript con un par de ejemplos del mundo real. Junto con JavaScript vanilla, también discutimos cómo lograrlo con la ayuda de la biblioteca jQuery.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.