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

227

Я смущен, когда дело доходит до отключения элемента <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?

  • 0
    Может проверить hasclass на любых прикрепленных событиях, но с href я не уверен
  • 0
    @ZachLeighton - когда дело доходит до «а», вы должны предоставить обработчик события для действия щелчка
Показать ещё 3 комментария
Теги:
button

6 ответов

283
Лучший ответ

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

Поделиться
  • 27
    Не работает для якорей, смотрите мой ответ
  • 6
    Чтобы также остановить запуск события click, добавьте класс с pointer-events: none как описано в stackoverflow.com/a/19477318/45525
Показать ещё 5 комментариев
109

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

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

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

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

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

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

Поделиться
  • 1
    Когда вы добавляете обработчик кликов к отключенной ссылке привязки, он не должен работать. Но в предоставленном вами примере обработчик кликов также запускается. jsfiddle.net/76wmpohs
  • 1
    Это кажется достаточным для Bootstrap 3. Похоже, что Bootstrap что-то делает для установки btn для визуального отключения, что также предотвращает срабатывание события click. В чистом jQuery и HTML без Bootstrap 3, таких как некоторые примеры скрипки, кажется, что это более сложная история. Но этот вопрос был в контексте Bootstrap.
76

Создание 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

См. скрипка

Поделиться
  • 0
    хороший понятный пример! $ ('# button-2'). attr ('disabled', 'disabled') Работает как для кнопок, так и для ссылок.
  • 5
    @msanjay: Нет - скрипка использует Bootstrap 2 и визуально отключает ссылки / якоря, но не отключает их функционально , как говорится в комментарии. Если вы измените его на BS3, он также функционально отключит их.
Показать ещё 1 комментарий
31

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

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

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

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

Поделиться
  • 0
    что делает фрагмент кода OP
  • 0
    @Eonasdan Правильно, так как это был лучший способ достичь желаемого результата. Я просто повторял то, что он сделал, было правильно.
Показать ещё 1 комментарий
28 
<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>
Поделиться
  • 4
    Реальное решение вопроса. Не нужно JQuery.
  • 0
    Это действительно правильное решение для кнопок начальной загрузки.
Показать ещё 3 комментария
0

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

if (!('#button').hasAttr('disabled'))
 $('#button').attr('onclick', 'someFunction();');
else
 $('#button').removeattr('onclick');
Поделиться
  • 0
    Вы, вероятно, имели в виду removeAttr вместо removeattr .
  • 1
    Да, .removeAttr () является ссылкой на имя метода
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню