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

этот вопрос уже есть ответ здесь:

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

6 ответов


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


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

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

для якоря:

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

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

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


строительство jeroenk это, вот краткое изложение:

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

посмотреть скрипка


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

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

на данный момент Twitter Bootstrap не имеет способа отключить функциональность кнопки без использования .

тем не менее, это будет хорошая возможность для них реализовать в своей библиотеке.


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

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

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