javascript - Mejor manera de desactivar un botón en Bootstrap de Twitter

Estoy confundido cuando se trata de deshabilitar un <button>, <input> o un <a> con las clases: .btn o .btn-primary, con JavaScript/jQuery.

He utilizado el siguiente fragmento para hacer eso:

$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);

Entonces, si solo proporciono el $ ('button').addClass('btn-disabled'); a mi elemento, aparecerá como deshabilitado, visualmente, pero la funcionalidad permanecerá igual y será clickeable de todos modos, por eso es la razón por la que agregué las configuraciones de attr y prop al elemento.

¿Alguien ha experimentado este mismo problema? ¿Es esta la manera correcta de hacerlo mientras se usa Bootstrap de Twitter?

Respuesta #1

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

Respuesta #2

Para la entrada y el botón:

$('button').prop('disabled', true);

Para ancla:

$('a').attr('disabled', true);

Comprobado en Firefox y Chrome.

Ver http://jsfiddle.net/czL54/2/

Respuesta #3

Construyendo sobre la respuesta de jeroenk, aquí está el resumen:

$('button').addClass('disabled'); // Disables visually
$('button').prop('disabled', true); // Disables visually + functionally

$('input[type=button]').addClass('disabled'); // Disables visually
$('input[type=button]').prop('disabled', true); // Disables visually + functionally

$('a').addClass('disabled'); // Disables visually
$('a').prop('disabled', true); // Does nothing
$('a').attr('disabled', 'disabled'); // Disables visually

Ver fiddle

Respuesta #4

La manera más fácil de hacer esto es usar el atributo disabled, como lo hiciste en tu pregunta original:

<button class="btn btn-disabled" disabled>Content of Button</button>

Hasta ahora, Twitter Bootstrap no tiene un método para desactivar la funcionalidad de un botón sin usar el atributo disabled.

No obstante, esta sería una excelente característica para que la implementen en su biblioteca de JavaScript.

Respuesta #5