Отключить ссылку в Bootstrap

Первый пример не работает. Мне нужно всегда иметь список для отключения ссылок? Или что не так с моей первой демонстрацией?

<a class="disabled" href="#">Disabled link</a>

<ul class="nav nav-pills">
  ...
  <li role="presentation" class="disabled"><a href="#">Disabled link</a></li>
  ...
</ul>

https://jsfiddle.net/7y0u2amy/

Ответы

Ответ 1

Мне кажется, вам нужен класс btn.
Это будет так:

<a class="btn disabled" href="#">Disabled link</a>

Ответ 2

Кажется, что Bootstrap не поддерживает отключенные ссылки. Вместо того, чтобы добавлять класс Bootstrap, вы можете добавить класс по своему усмотрению и добавить к нему некоторый стиль, например:

a.disabled {
  /* Make the disabled links grayish*/
  color: gray;
  /* And disable the pointer events */
  pointer-events: none;
}
<!-- Make the disabled links unfocusable as well -->
<a href="#" class="disabled" tabindex="-1">Link to disable</a><br/>
<a href="#">Non-disabled Link</a>

Ответ 3

Если то, что вы пытаетесь сделать, это отключить ссылку, нет возможности сделать это. Я думаю, вы можете найти ответ, который будет работать для вас в этом вопросе здесь.

Один из вариантов заключается в использовании

<a href="/" onclick="return false;">123n</a>

Отключенный тег href

Ответ 4

Вы не можете установить ссылки на "отключенные" только системные элементы, такие как вход, текстовое поле и т.д.

Но вы можете отключить ссылки с помощью jQuery/JavaScript

$('.disabled').click(function(e){
    e.preventDefault();
});

Просто обведите вышеуказанный код в любое событие, которое вы хотите отключить.

Ответ 5

Я только что создал свою собственную версию с использованием CSS. Как мне нужно отключить, тогда, когда документ готов, используйте jQuery, чтобы сделать активным. Таким образом, пользователь не может нажимать кнопку до тех пор, пока документ не будет готов. Так что я могу вместо этого заменить AJAX. Я придумал, как добавить класс к самому тегу привязки и удалить класс, когда документ будет готов. Может изменить это для ваших нужд.

CSS:

a.disabled{
    pointer-events: none;
    cursor: default;
}

HTML:

<a class="btn btn-info disabled">Link Text</a>

JS:

$(function(){
    $('a.disabled').on('click',function(event){
        event.preventDefault();
    }).removeClass('disabled');
});