Отключить гиперссылку с помощью jQuery

Ответ 1

Вы можете связать обработчик кликов, который возвращает false:

$('.my-link').click(function () {return false;});

Чтобы снова включить его, отвяжите обработчик:

$('.my-link').unbind('click');

Обратите внимание, что disabled не работает, потому что он предназначен только для входных данных формы.

jQuery уже ожидал этого, предоставляя ярлык в jQuery 1.4.3:

$('.my-link').bind('click', false);

И отсоединить/снова включить:

$('.my-link').unbind('click', false);

Ответ 2

Я знаю, что это старый вопрос, но он пока не решен. Следующее мое решение...

Просто добавьте этот глобальный обработчик:

$('a').click(function()
{
     return ($(this).attr('disabled')) ? false : true;
});

Вот небольшая демонстрация: http://jsbin.com/akihik/3

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

например

a[disabled]
{
    color: grey; 
}

Во всяком случае кажется, что атрибут disabled недействителен для тегов a. Если вы предпочитаете следовать спецификациям w3c, вы можете легко использовать html5-совместимый атрибут data-disabled. В этом случае вам нужно изменить предыдущий фрагмент и использовать $(this).data('disabled').

Ответ 3

Удаление атрибута href определенно похоже на путь. Если по какой-то причине вам это понадобится позже, я просто сохраню его в другом атрибуте, например.

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

Это единственный способ сделать это, что приведет к тому, что ссылка также будет отключена без написания пользовательского CSS. Просто привязка обработчика кликов к false приведет к тому, что ссылка будет выглядеть как обычная ссылка, но при нажатии на нее ничего не произойдет, что может смутить пользователей. Если вы собираетесь использовать маршрут обработчика кликов, я бы, по крайней мере, также .addClass("link-disabled") и написал некоторый CSS, который делает ссылки с этим классом похожими на обычный текст.

Ответ 4

$('.my-link').click(function(e) { e.preventDefault(); }); 

Вы можете использовать:

$('.my-link').click(function(e) { return false; }); 

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

Ответ 5

Свойству CSS pointer-events немного не хватает, когда дело доходит до поддержки (caniuse.com), но это очень красноречиво:

.my-link { pointer-events: none; } 

Ответ 6

function EnableHyperLink(id) {
        $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
        $('#' + id).addClass('enable-link');
        $('#' + id).removeClass('disable-link');
    }

    function DisableHyperLink(id) {
        $('#' + id).addClass('disable-link');
        $('#' + id).removeClass('enable-link');
        $('#' + id).removeAttr('onclick');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}

Ответ 7

Атрибут disabled недействителен для всех HTML-элементов, которые, как мне кажется, см. в статье MSDN. Это и правильное значение для инвалидов просто "отключено". Ваш лучший подход - связать функцию щелчка, которая возвращает false.

Ответ 8

Добавить класс, содержащий указатели-события: non

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');

Ответ 9

Ниже будет ссылка на ссылку с текстом

$('a').each(function () {
    $(this).replaceWith($(this).text());
});

Изменить:

Вышеуказанный код будет работать с гиперссылками только с текстом, он не будет работать с изображениями. Когда мы попробуем его со ссылкой на изображение, он не покажет никакого изображения.

Чтобы этот код был совместим со ссылками на изображения, следующие будут отлично работать

// below given function will replace links with images i.e. for image links
$('a img').each(function () {
    var image = this.src;
    var img = $('<img>', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$('a').each(function () {
    $(this).replaceWith($(this).text());
});

пояснение: В приведенных выше фрагментах кода в первом фрагменте мы заменяем все ссылки на изображения только ими. После этого мы заменяем текстовые ссылки текстом.

Ответ 10

Это также хорошо работает. Прост, удобен и не требует использования jQuery.

<a href="javascript:void(0)">Link</a>

Ответ 11

Try:

$(this).prop( "disabled", true );