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