Cómo deshabilitar un botón con jQuery

¿Alguna vez necesitó evitar que alguien haga clic en un botón demasiado temprano, como completar un formulario o mientras algo se está cargando? Ahí es donde entran en vigencia los botones de discapacidad.

Con jQuery, esto es extremadamente simple. Veamos cómo funciona, con ejemplos claros que puede copiar y encender su sitio.

Lo primero es lo primero: ¿qué significa «deshabilitar»?

Cuando decimos que estamos «molestando su botón», queremos decir que estamos impidiendo que los usuarios puedan hacer clic. Por lo general, se mira o está atascado, dando consejos visuales a personas que no están listas para usar.

En HTML, puede deshabilitar un botón a través del disabled Atributo:

htmlCopyEdit<button disabled>Click Me</button>

Pero si quieres hacer esto dinámicamente, como la acción del usuario, ahí es donde entra JQuery.

Arreglo jQuery (por si acaso)

Antes de cualquier otra cosa, asegúrese de que jQuery esté cargada en su página. Puedes agregarlo así:

htmlCopyEdit<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Cuando eso está en su lugar, estás listo para ir.

Cómo deshabilitar un botón usando jQuery

Tengamos un botón como este:

htmlCopyEdit<button id="myButton">Submit</button>

Para deshabilitarlo usando jQuery, haría esto:

javascriptCopyEdit$('#myButton').prop('disabled', true);

Solo así, el botón ahora está deshabilitado.

Y para habilitarlo de nuevo?

javascriptCopyEdit$('#myButton').prop('disabled', false);

Alternar simple. No hay dolor de cabeza.

Una muestra de la vida real: deshabilite la forma de inserción

Este es un caso de uso común: tiene un formulario y desea deshabilitar el botón después de que una persona lo haya hecho clic, por lo que no interfiere accidentalmente con él.

htmlCopyEdit<form id="myForm">
  <input type="text" placeholder="Your name" required>
  <button type="submit" id="submitBtn">Send</button>
</form>

javascriptCopyEdit$('#myForm').on('submit', function(e) 
  $('#submitBtn').prop('disabled', true);
);

Eso es todo. Haga clic en uno y bloquea el botón en sí.

Otro truco: desactivar la entrada basada

¿Intenta mantener el botón deshabilitado hasta que alguien llene un campo?

htmlCopyEdit<input type="text" id="nameField" placeholder="Your name">
<button id="submitBtn" disabled>Send</button>

javascriptCopyEdit$('#nameField').on('keyup', function() 
  let value = $(this).val().trim();
  $('#submitBtn').prop('disabled', value === '');
);

Esto mantiene el botón deshabilitado hasta que el usuario decide algo. Súper útil para formularios de inicio de sesión, señales de correo electrónico y objetos similares.

Resumen rápido

Aquí está la esencia:

• Consumado .prop('disabled', true) para deshabilitar
• Consumado .prop('disabled', false) permitir
• JQuery lo hace rápido y limpio
• Genial para mejorar UX y evitar el caos doble

Ideas finales

Al utilizar estas técnicas jQuery, puede administrar de manera efectiva los estados de botones, mejorar la experiencia del usuario y evitar interacciones no deseadas en sus páginas web.

Imagen destacada con Storyset en Freepik