Estoy confundido cuando se trata de desactivar un <botón>
, <input>
o un elemento <a>
con las clases: .btn
o .btn-primary
, con JavaScript/jQuery.
Para ello he utilizado el siguiente snippet:
$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);
Así que, si sólo proporciono el $('button').addClass('btn-disabled');
a mi elemento, aparecerá como deshabilitado, visualmente, pero la funcionalidad seguirá siendo la misma y se podrá hacer clic de todos modos, por lo que es la razón por la que he añadido la configuración attr
y prop
al elemento.
¿Alguien ha experimentado este mismo problema? ¿Es esta la forma correcta de hacer esto - mientras que el uso de Twitter's Bootstrap?
La forma más sencilla de hacerlo es utilizar el atributo disabled
, tal y como habías hecho en tu pregunta original:
<button class="btn btn-disabled" disabled>Contenido del botón</button>
.
Por ahora, Twitter Bootstrap no tiene un método para desactivar la funcionalidad de un botón sin usar el atributo disabled
.
Sin embargo, esta sería una excelente característica para que la implementen en su biblioteca de javascript.
Cualquiera que sea el atributo que se añada al botón/anclaje/enlace para deshabilitarlo, bootstrap sólo le está añadiendo estilo y el usuario podrá seguir haciendo clic en él mientras exista el evento onclick. Así que mi solución simple es comprobar si está deshabilitado y eliminar/añadir el evento onclick:
if (!('#button').hasAttr('disabled'))
$('#button').attr('onclick', 'someFunction();');
else
$('#button').removeattr('onclick');