Ответ 1

Вы не можете отключить ссылку (переносимым образом). Вы можете использовать один из этих методов (каждый из которых имеет свои преимущества и недостатки).

способ CSS

Это должно быть правильным способом (но см. ниже), чтобы сделать это, когда большинство браузеров будут его поддерживать:

a.disabled {
    pointer-events: none;
}

Это то, что, например, Bootstrap 3.x. В настоящее время (2016) он хорошо поддерживается только Chrome, FireFox и Opera (19+). Internet Explorer начал поддерживать это с версии 11, но не для ссылок, однако он доступен во внешнем элементе, например:

span.disable-links {
    pointer-events: none;
}

С

<span class="disable-links"><a href="#">...</a></span>

Обход

Нам, вероятно, нужно определить класс CSS для pointer-events: none, но что, если мы повторно используем атрибут disabled вместо класса CSS? Строго говоря disabled не поддерживается для <a>, но браузеры не будут жаловаться на неизвестные атрибуты. Использование атрибута disabled IE проигнорирует pointer-events, но будет соблюдать специфический для IE атрибут disabled; другие браузеры, совместимые с CSS, будут игнорировать неизвестный атрибут disabled и честь pointer-events. Легче писать, чем объяснять:

a[disabled] {
    pointer-events: none;
}

Другой вариант для IE 11 - установить display элементов ссылки на block или inline-block:

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

Обратите внимание, что это может быть переносное решение, если вам нужно поддерживать IE (и вы можете изменить свой HTML), но...

Все это, пожалуйста, обратите внимание, что pointer-events отключает только... события указателя. Ссылки по-прежнему будут доступны через клавиатуру, тогда вам также необходимо применить один из других методов, описанных здесь.

Фокус

В сочетании с описанным выше методом CSS вы можете использовать tabindex нестандартным способом для предотвращения фокусировки элемента:

<a href="#" disabled tabindex="-1">...</a>

Я никогда не проверял его совместимость со многими браузерами, поэтому вы можете протестировать его самостоятельно, прежде чем использовать это. Это имеет преимущество для работы без JavaScript. К сожалению (но очевидно) tabindex не может быть изменен с CSS.

Перехват кликов

Используйте href для функции JavaScript, проверьте условие (или сам отключенный атрибут) и не делайте ничего в этом случае.

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

Чтобы отключить ссылки, сделайте следующее:

$("td > a").attr("disabled", "disabled");

Чтобы снова включить их:

$("td > a").removeAttr("disabled");

Если вы хотите вместо .is("[disabled]"), вы можете использовать .attr("disabled") != undefined (jQuery 1.6+ всегда будет возвращать undefined, если атрибут не установлен), но is() намного понятнее (спасибо Дэйву Стюарту за этот отзыв). Обратите внимание, что здесь я использую атрибут disabled нестандартным способом, если вам это интересно, замените атрибут классом и замените .is("[disabled]") на .hasClass("disabled") (добавление и удаление с помощью addClass() и removeClass()).

Zoltán Tamási отметил в комментарии, что "в некоторых случаях событие click уже привязано к некоторой" реальной "функции (например, с использованием knockoutjs). В этом случае поэтому обработчик обработчиков событий может вызвать некоторые проблемы. Следовательно, я реализовал отключенные ссылки, привязывая обработчик ложных возвратов к событиям link touchstart, mousedown и keydown. У него есть некоторые недостатки (это предотвратит прокрутку сенсорной прокрутки по ссылке)" но обработка событий клавиатуры также имеет преимущество для предотвращения навигации на клавиатуре.

Обратите внимание, что если href не очищается, пользователь может вручную посетить эту страницу.

Удалить ссылку

Очистите атрибут href. С помощью этого кода вы не добавляете обработчик событий, но вы сами меняете ссылку. Используйте этот код для отключения ссылок:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

И этот, чтобы снова включить их:

$("td > a").each(function() {
    this.attr("href", this.data("href")).removeAttr("disabled");
});

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

Fake click handler

Добавьте/удалите функцию onclick, где вы return false, ссылка не будет следовать. Чтобы отключить ссылки:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Чтобы снова включить их:

$("td > a").removeAttr("disabled").off("click");

Я не думаю, что есть причина предпочесть это решение вместо первого.

Стайлинг

Стилирование еще проще, независимо от того, какое решение вы используете, чтобы отключить ссылку, которую мы добавили, добавить атрибут disabled, чтобы вы могли использовать следующее правило CSS:

a[disabled] {
    color: gray;
}

Если вы используете класс вместо атрибута:

a.disabled {
    color: gray;
}

Если вы используете инфраструктуру пользовательского интерфейса, вы можете увидеть, что отключенные ссылки не разработаны должным образом. Bootstrap 3.x, например, обрабатывает этот сценарий, и кнопка правильно оформлена как с атрибутом disabled, так и с классом .disabled. Если вместо этого вы очищаете ссылку (или используете один из других методов JavaScript), вы также должны обрабатывать стиль, потому что <a> без href по-прежнему раскрашен как включен.

Доступные расширенные интернет-приложения (ARIA)

Не забудьте также включить атрибут aria-disabled="true" вместе с атрибутом/классом disabled.

Ответ 2

Получено исправление в css.

td.disabledAnchor a{
       pointer-events: none !important;
       cursor: default;
       color:Gray;
}

Выше css при применении к тегу привязки отключит событие click.

Подробнее об этой ссылке

Ответ 3

Спасибо всем, кто разместил решения (особенно @AdrianoRepetti), я объединил несколько подходов, чтобы предоставить более продвинутые функциональные возможности disabled (и он работает с перекрестным браузером). Код ниже (как ES2015, так и coffeescript на основе ваших предпочтений).

Это обеспечивает несколько уровней защиты, чтобы анкеры, помеченные как отключенные, фактически вели себя как таковые. Используя этот подход, вы получаете якорь, который вы не можете:

• выберите
• вкладка и нажмите return
• вкладка к ней переместит фокус на следующий настраиваемый элемент
• известно, что привязка впоследствии включена.

Как

• Включите этот css, так как это первая линия защиты. Это предполагает, что выбранный вами селектор a.disabled

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

• Затем создайте экземпляр этого класса на готовом (с дополнительным селектором):

    new AnchorDisabler()
  

Класс ES2015

npm install -S key.js

import {Key, Keycodes} from 'key.js'

export default class AnchorDisabler {
  constructor (config = { selector: 'a.disabled' }) {
    this.config = config
    $(this.config.selector)
      .click((ev) => this.onClick(ev))
      .keyup((ev) => this.onKeyup(ev))
      .focus((ev) => this.onFocus(ev))
  }

  isStillDisabled (ev) {
    //  since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
    let target = $(ev.target)
    if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
      return true
    }
    else {
      return false
    }
  }

  onFocus (ev) {
    //  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
    if (!this.isStillDisabled(ev)) {
      return
    }

    let focusables = $(':focusable')
    if (!focusables) {
      return
    }

    let current = focusables.index(ev.target)
    let next = null
    if (focusables.eq(current + 1).length) {
      next = focusables.eq(current + 1)
    } else {
      next = focusables.eq(0)
    }

    if (next) {
      next.focus()
    }
  }

  onClick (ev) {
    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }

  onKeyup (ev) {
    // We are only interested in disabling Enter so get out fast
    if (Key.isNot(ev, Keycodes.ENTER)) {
      return
    }

    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }
}

Класс coffescript:

class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

Ответ 4

Попробуйте элемент:

$(td).find('a').attr('disabled', 'disabled');

Отключение ссылки работает для меня в Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/.

Firefox, похоже, не играет хорошо. Этот пример работает:

<a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>

$('#a1').attr('disabled', 'disabled');

$(document).on('click', 'a', function(e) {
    if ($(this).attr('disabled') == 'disabled') {
        e.preventDefault();
    }
});

Примечание: добавлено выражение 'live' для будущих отключенных/разрешенных ссылок.
Примечание2: изменено 'live' на 'on'.

Ответ 5

Я получил решение ниже, которое может работать либо с атрибутом <a href="..." disabled="disabled">, либо с классом <a href="..." class="disabled">:

Стили CSS:

a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

Javascript (в готовом jQuery):

$("a[disabled], a.disabled").on("click", function(e){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        e.preventDefault();
})

Ответ 6

вы не можете отключить ссылку, если вы хотите, чтобы событие click не запускалось, а просто Remove action из этой ссылки.

$(td).find('a').attr('href', '');

Для получения дополнительной информации: - Элементы, которые можно отключить

Ответ 7

Я бы сделал что-то вроде

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

что-то вроде этого должно работать. Вы добавляете класс для ссылок, которые хотите отключить, а затем вы возвращаете false, когда кто-то нажимает на них. Чтобы включить их, просто удалите класс.

Ответ 8

Чтобы отключить ссылку для доступа к другой странице на сенсорном устройстве:

if (control == false)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

Ответ 9

Bootstrap 4.1 предоставляет класс с именем disabled и атрибутом aria-disabled="true".

пример"

<a href="#" 
        class="btn btn-primary btn-lg disabled" 
        tabindex="-1" 
        role="button" aria-disabled="true"
>
    Primary link
</a>

Больше на getbootstrap.com

Так что если вы хотите сделать это динамически, и you don't want to care if it is button or ancor чем в JS-скрипте, вам нужно что-то подобное

   let $btn=$('.myClass');
   $btn.attr('disabled', true);
   if ($btn[0].tagName == 'A'){
        $btn.off();
        $btn.addClass('disabled');
        $btn.attr('aria-disabled', true);
   }

Но будь осторожен

Решение работает только по ссылкам с классами btn btn-link.

Иногда bootstrap рекомендует использовать класс card-link, в этом случае решение не будет работать.

Ответ 10

Вы можете использовать это, чтобы отключить гиперссылку asp.net или ссылок в html.

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Ответ 11

Есть еще один возможный способ, и тот, который мне больше всего нравится. В основном это так же, как лайтбокс отключает целую страницу, помещая div и возиться с z-index. Вот соответствующие фрагменты из моего проекта. Это работает во всех браузерах!!!!!

Javascript (jQuery):

var windowResizer = function(){
        var offset = $('#back').offset();   
        var buttontop = offset.top;
        var buttonleft = offset.left;
        $('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
        offset = $('#next').offset();
        buttontop = offset.top;
        buttonleft = offset.left;
        $('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
}

$(document).ready(function() {
    $(window).resize(function() {   
        setTimeout(function() {
            windowResizer();
        }, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast
    });
});

и в html

<a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a>
<a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a>
<img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
<img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>

Таким образом, resizer находит привязки (изображения только стрелки) и помещает деаблер сверху. Изображение disabler представляет собой полупрозрачный серый квадрат (изменение ширины/высоты разделителей в html для соответствия вашей ссылке), чтобы показать, что он отключен. Плавающий позволяет динамически изменять размер страницы, а дезадаптеры последуют этому примеру в windowResizer(). Вы можете найти подходящие изображения через Google. Для простоты я разместил соответствующий css inline.

тогда на основании некоторого условия

$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

Ответ 12

Я думаю, что многие из них передумали. Добавьте класс, который вы хотите, например disabled_link.
Затем сделайте css .disabled_link { display: none }
Boom теперь пользователь не может видеть ссылку, поэтому вам не придется беспокоиться о том, чтобы щелкнуть ее. Если они что-то делают для того, чтобы ссылка была нажата, просто удалите класс с помощью jQuery:
$("a.disabled_link").removeClass("super_disabled"). Бум сделан!