Я запутался, когда нужно отключить элемент <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's Bootstrap?
Вам просто нужно $('button').prop('disabled', true);
часть, кнопка автоматически примет класс disabled.
Для ввода и кнопка:
$('button').prop('disabled', true);
Для якоря:
$('a').attr('disabled', true);
Проверил в Firefox, хром.
См
Строение 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
Смотрите [скрипка][2]
Самый простой способ сделать это - использовать атрибут disabled
, как вы сделали в своем первоначальном вопросе:
<button class="btn btn-disabled" disabled>Содержание кнопки</button>
.
На данный момент в Twitter Bootstrap нет метода отключения функциональности кнопки без использования атрибута disabled
.
Тем не менее, это было бы отличной возможностью для внедрения в их библиотеку javascript.
<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');