javascript - disabled - button bootstrap 3
La mejor manera de deshabilitar el botón en el Bootstrap de Twitter (6)
Esta pregunta ya tiene una respuesta aquí:
Estoy confundido cuando se trata de deshabilitar un elemento <button> , <input> o <a> con clases: .btn o .btn-primary , con JavaScript / jQuery.
He usado un fragmento de código siguiente para hacer eso:
$(''button'').addClass(''btn-disabled'');
$(''button'').attr(''disabled'', ''disabled'');
$(''button'').prop(''disabled'', true);
Por lo tanto, si simplemente proporciono el $(''button'').addClass(''btn-disabled''); Para mi elemento, aparecerá como deshabilitado, visualmente, pero la funcionalidad seguirá siendo la misma y, sin embargo, se podrá hacer clic para que sea la razón por la que agregué las configuraciones de attr y prop al elemento.
¿Alguien ha expirado este mismo problema por ahí? ¿Es esta la forma correcta de hacer esto, mientras usas el Bootstrap de Twitter?
A partir de 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
Cualquiera que sea el atributo se agrega al botón / ancla / enlace para deshabilitarlo, bootstrap simplemente le agrega estilo y el usuario aún podrá hacer clic en él mientras aún haya un evento onclick. Así que mi solución simple es verificar si está deshabilitado y eliminar / agregar el evento onclick:
if (!(''#button'').hasAttr(''disabled''))
$(''#button'').attr(''onclick'', ''someFunction();'');
else
$(''#button'').removeattr(''onclick'');
La forma más fácil de hacerlo es usar el atributo disabled , como lo hizo en su pregunta original:
<button class="btn btn-disabled" disabled>Content of Button</button>
A partir de ahora, Twitter Bootstrap no tiene un método para deshabilitar la funcionalidad de un botón sin usar el atributo disabled .
No obstante, esta sería una excelente característica para que ellos implementen en su biblioteca javascript.
Para entrada y botón:
$(''button'').prop(''disabled'', true);
Para ancla:
$(''a'').attr(''disabled'', true);
Comprobado en Firefox, Chrome.
Solo necesita $(''button'').prop(''disabled'', true); parte, el botón tomará automáticamente la clase desactivada.
<div class="bs-example">
<button class="btn btn-success btn-lg" type="button">Active</button>
<button class="btn btn-success disabled" type="button">Disabled</button>
</div>