Лучший способ отключить кнопку в Twitter Bootstrap

Я смущен, когда дело доходит до отключения элемента <button>, <input> или <a> с классами: .btn или .btn-primary с помощью JavaScript/jQuery.

Для этого я использовал следующий фрагмент:

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

Итак, если я просто предоставил элемент $('button').addClass('btn-disabled'); для моего элемента, он будет выглядеть как отключенный, визуально, но функциональность останется прежней, и она будет доступна без обращения, так что это причина, по которой я добавил attr и prop для элемента.

Кто-нибудь из них выходил из этой же проблемы? Это правильный способ сделать это - при использовании Twitter Bootstrap?

Ответы

Ответ 1

Вам просто нужна часть $('button').prop('disabled', true);, кнопка автоматически примет отключенный класс.

Ответ 2

Для ввода и кнопки:

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

Для привязки:

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

Проверено в firefox, chrome.

См. http://jsfiddle.net/czL54/2/

Ответ 3

Создание jeroenk answer, здесь вышло:

$('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

См. скрипка

Ответ 4

Самый простой способ сделать это - использовать атрибут disabled, как вы это делали в своем исходном вопросе:

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

В настоящее время Twitter Bootstrap не имеет способа отключить функциональность кнопки без использования атрибута disabled.

Тем не менее, это будет отличная возможность для их реализации в их библиотеке javascript.

Ответ 5

<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>

Ответ 6

Какой-либо атрибут добавляется к кнопке/привязке/ссылке, чтобы отключить его, bootstrap просто добавляет стиль к нему, и пользователь все равно сможет щелкнуть его, пока еще есть событие onclick. Поэтому мое простое решение - проверить, отключено ли оно и удалить/добавить событие onclick:

if (!('#button').hasAttr('disabled'))
 $('#button').attr('onclick', 'someFunction();');
else
 $('#button').removeattr('onclick');