Deshabilitar un botón con CSS o JavaScript

En este artículo vemos como podemos desactivar un botón con CSS o JavaScript si no tenemos acceso a cambiar la etiqueta HTML directamente.

por

esther

Cuando utilizamos en HTML los elementos button o input type=»button» tenemos la opción de añadir el atributo disabled para desactivarlo y que el usuario no pueda utilizarlo:

<input type="button" value="Click me" disabled>
<button name="button" disabled>Click me</button>

Si embargo, en muchas ocasiones lo que necesitamos es poder desactivarlo dinámicamente en función de otros elementos o queremos hacerlo en CMS como WordPress sin tocar el código del plugin o elemento que crea el botón.

Para ello, podemos utilizar JavaScript o jQuery e incluso jugar con CSS para desactivarlo y modificar el aspecto que queramos cuando lo está.

Desactivar un botón con JavaScript o jQuery

Para anular la funcionalidad de un botón con JS sólo necesitamos acceder al elemento (mediante ID o en su defecto, por su clase) y modificar el atributo disabled.

JavaScript

<script> 
   const btncompra = document.getElementById('place_order');
   btncompra.disabled = true; 
</script>

Nota: en este artículo tienes más información sobre alternativas getElementById(): Un repaso a getElementByElementId, getElementsByClassName, getElementsByTagName y querySelector()

jQuery

<script> 
   jQuery( document ).ready(function() { 
      jQuery(#'place_order').prop("disabled", true);  // true para desactivarlo o false para volverlo a activar
   }); 
</script>

Desactivar un botón con CSS

Esta opción es muy interesante cuando necesitas desactivar un botón y no tienes acceso al código que lo genera y no quieres añadir JS en la web

    #place_order
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }
    #place_order > * 
    {
        pointer-events:none;
    }

En este ejemplo, modificamos el cursor y color de fondo para que tenga el aspecto de desactivado, y anulamos que el usuario pueda hacer clic sobre ese elemento con pointer-events:none.

Ojo que según la estructura del html es posible que tengas que añadir el pointer-events en la clase del botón directamente:

    #place_order
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
        pointer-events:none;
    }

Comprueba siempre que el botón, además de parecer desactivado, lo está realmente y no permite que se haga clic en él.

Por otra parte, también recuerda que también podemos modificar el diseño de los botones que están desactivados, utilizando su atributo en CSS:

button[disabled=disabled], button:disabled {
    // your css rules
}

En este caso no estamos desactivando nada, sino cambiando el diseño de los que lo están.

Más información sobre pointer-events: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

Artículos relacionados