La mejor manera de desactivar el botón en Twitter's Bootstrap

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?

Gottlieb Notschnabel
Pregunta editada 2º septiembre 2015 в 7:52
Programación
javascript button jquery twitter-bootstrap
26º junio 2013 в 6:23
17 vistas
Solución

Sólo necesitas la parte $('button').prop('disabled', true);, el botón tomará automáticamente la clase disabled.

Comentarios (7)

La forma más sencilla de hacerlo es utilizar el atributo disabled, tal y como habías hecho en tu pregunta original:

Contenido del botón.

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.

1234567
Respuesta editada 26º junio 2013 в 6:34
Comentarios (3)

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');
Comentarios (3)