Як зробити так, щоб прив’язне посилання не можна було натиснути або відключити?

У мене є якірне посилання, яке я хочу відключити, коли користувач клацне на ньому. Або видаліть анкерний тег навколо тексту, але обов’язково збережіть текст.

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

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

Будь-яка підказка?

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

Я щойно зрозумів, про що ви просите (сподіваюся). Ось негарне рішення

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;
});

Найчистішим методом було б додати клас із подіями покажчика: жодного, коли ви хочете відключити клацання. Він би працював як звичайна етикетка.

.disableClick{
    pointer-events: none;
}

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

Використовуйте стиль CSS для покажчиків подій . (як запропонував Джейсон Макдональд)

Див. MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Його підтримує більшість браузерів.

Просте додавання атрибута "disabled" до якоря зробить цю роботу, якщо у вас є глобальне правило CSS, як показано нижче:

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

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

або

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

Це залежить від ситуації

Bootstrap надає нам .disabledклас. Будь ласка, використовуйте його.

Але .disabledклас працює лише тоді, коли тег 'a' вже має клас 'btn'. Це не працює з будь-яким старим тегом "a". btnКлас не може бути доречно в тому чи іншому контексті , як це має стиль конотації. Під обкладинками .disabledклас встановлюється pointer-eventsна none, тож ви можете змусити CSS робити те саме, що переконали Сарой Арьял та Вітріло. (Дякую, Les Nightingill за цю пораду).

Додати cssклас:

.disable_a_href{
    pointer-events: none;
}

Додайте це jquery:

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

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

Найкращий спосіб - запобігти дії за замовчуванням. У разі прив'язки тегу поведінка за замовчуванням переспрямовує на hrefвказану адресу.

Отже, наступний javascript найкраще працює в ситуації:

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

Ви можете використовувати подію onclick, щоб вимкнути дію натискання:

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

Або ви можете просто використати щось інше, ніж <a>тег.

Коментарі Джейсона Макдональда працювали у мене, тестувались у Chrome, Mozila та IE.

Додано сірий колір, щоб показати ефект відключення.

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

Jquery вибирав лише перший елемент у списку прив’язок, додав метасимвол (*), щоб вибрати та вимкнути всі елементи з ідентифікатором #ThisLink.

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

Напишіть це в один рядок коду jQuery

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

якщо ви хочете писати у файлі css

.hyperlink{
    pointer-events: none;
}

Створіть наступний клас у таблиці стилів:

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

Додайте цей клас до динамічного посилання наступним чином.

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

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

Спробуйте це:

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

Просто в SASS:

.some_class{
     // styles...

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

Це метод, який я використав для відключення, сподіваюся, це допомагає.

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

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

Це був би ще один спосіб зробити це, обробник з return false, який відключить посилання, буде доданий після одного клацання.

Найпростіший спосіб

У вашому html:

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

У вашому js:

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

Якщо ви використовуєте його як атрибут, це чудово працює