Как сделать привязку привязки недоступной или отключенной?

У меня есть якорная ссылка, которую я хочу отключить, когда пользователь нажимает на нее. Или удалите тег привязки вокруг текста, но обязательно сохраните текст.

<a href='' id='ThisLink'>some text</a>

Я легко могу сделать это с помощью кнопки, добавив .attr("disabled", "disabled");
Я успешно добавил отключенное свойство, но ссылка все еще была кликабельной.
Мне все равно, подчеркнут ли текст или нет.

Любая подсказка?

Когда вы нажимаете не на того музыканта, он должен просто добавить "Неправильно", а затем стать неприкосновенным.
Когда вы нажмете и вы правы, он должен добавить "Awesome", а затем отключить все теги <a>.

Ответ 1

Я просто понял, о чем вы просите (надеюсь). Здесь уродливое решение

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

Ответ 2

Самый чистый метод - добавить класс с указателями-событиями: нет, если вы хотите отключить клик. Он будет функционировать как нормальная метка.

.disableClick{
    pointer-events: none;
}

Ответ 3

<a href='javascript:void(0);'>some text</a>

Ответ 4

Используйте указатель-события стиль CSS. (как предположил Джейсон Макдональд)

Смотрите MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events. Поддерживается в большинстве браузеров.

Простое добавление "отключенного" атрибута к якору выполнит эту работу, если у вас есть глобальное правило CSS, подобное следующему:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Ответ 5

$('a').removeAttr('href')

или

$('a').click(function(){ return false})

Это зависит от ситуации

Ответ 6

Добавьте класс css:

.disable_a_href{
    pointer-events: none;
}

Добавьте это jquery:

$("#ThisLink").addClass("disable_a_href");

Ответ 7

Bootstrap предоставляет нам класс .disabled. Пожалуйста, используйте его.

Но класс .disabled работает только тогда, когда тег 'a' уже имеет класс 'btn'. Он не работает ни с одним старым тегом "а". Класс btn может не подходить в некотором контексте, так как он имеет коннотации стилей. Под обложками класс .disabled устанавливает для pointer-events значение none, так что вы можете сделать так, чтобы CSS делал то же самое, что Saroj Aryal и Vitrilo предложили. (Спасибо, Les Nightingill за этот совет).

Ответ 8

Просто удалите атрибут href из тега привязки.

Ответ 9

Лучший способ - предотвратить действие по умолчанию. В случае тега привязки поведение по умолчанию перенаправляется на href указанный адрес.

Итак, следующий javascript лучше всего работает в ситуации:

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

Ответ 10

Напишите это в одной строке кода JQuery

$('.hyperlink').css('pointer-events','none');

если вы хотите написать в файл CSS

.hyperlink{
    pointer-events: none;
}

Ответ 11

Вы можете использовать событие onclick, чтобы отключить действие click:

<a href='' id='ThisLink' onclick='return false'>some text</a>

Или вы можете просто использовать что-то отличное от тега <a>.

Ответ 12

Создайте следующий класс в таблице стилей:

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

Добавьте этот класс к вам динамически, как показано ниже.

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

Ответ 13

Комментарии Джейсона Макдональда работали для меня, протестированы в Chrome, Mozila и IE.

Добавлен серый цвет, чтобы показать эффект отключения.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery выбирал только первый элемент в списке привязок, добавлял метасимвол (*), чтобы выбрать и отключить весь элемент с id #ThisLink.

$("#ThisLink*").addClass("disable_a_href");

Ответ 14

Попробуйте следующее:

$('a').contents().unwrap();

Ответ 15

Просто в SASS:

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

Ответ 16

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

$("#ThisLink").attr("href","javascript:;");

Ответ 17

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

Это был бы другой способ сделать это, обработчик с return false, который отключит ссылку, будет добавлен после одного щелчка.

Ответ 18

Самый простой способ

В вашем html:

<a id="foo" disabled="true">xxxxx<a>

В js:

$('#foo').attr("disabled", false);

Если вы используете его как атрибут, отлично работает