Fico confuso quando se trata de desativar um <button>
, <input>
ou um <a>
elemento com classes: .btn
ou .btn-primary
, com JavaScript/jQuery.
Eu usei um pequeno trecho para fazer isso:
$('button').addClass('btn-disabled');
$('button').attr('disabled', 'disabled');
$('button').prop('disabled', true);
Então, se eu apenas fornecer o $('button').addClass('btn-disabled');
ao meu elemento, ele aparecerá como desabilitado, visualmente, mas a funcionalidade permanecerá a mesma e será clicável nontheless, de modo que seja a razão pela qual eu adicionei as configurações attr
e prop
ao elemento.
Alguém já expirou este mesmo problema lá fora? Esta é a maneira certa de fazer isto - enquanto usa o Twitter's Bootstrap?
A maneira mais fácil de fazer isso, é utilizar o atributo "deficiente", como você tinha feito na sua pergunta original:
<button class="btn btn-disabled" disabled>Content of Button</button>
A partir de agora, o Twitter Bootstrap não't tem um método para desativar a funcionalidade de um botão's sem utilizar o atributo disabled
.
No entanto, esta seria uma excelente característica para eles implementarem na sua biblioteca javascript.
O que sempre atributo é adicionado ao botão/âncora/link para desabilitá-lo, bootstrap é apenas adicionar estilo a ele e o usuário ainda será capaz de clicar nele enquanto ainda há um evento onclick. Então minha solução simples é verificar se ele está desabilitado e remover/adicionar o evento onclick:
if (!('#button').hasAttr('disabled'))
$('#button').attr('onclick', 'someFunction();');
else
$('#button').removeattr('onclick');