Лучшего способ кнопки отключения в щебетать Bootstrap

Question

Я смущен, когда речь идет отключение <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.

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

Answer 1

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

Answer 2

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

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

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

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

Answer 3

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

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

Answer 4

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

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

Для якоря:

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

Проверено в светлячок , хром.

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

Answer 5

Строительство от jeroenk's 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 

См fiddle

Answer 6

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