it-swarm.com.ru

Как отключить ссылки HTML

У меня есть кнопка ссылки внутри <td>, которую я должен отключить. Это работает на IE, но не работает в Firefox и Chrome. Структура - Ссылка внутри <td>. Я не могу добавить контейнер в <td> (например, div/span)

Я попробовал все следующее, но не работал на Firefox (используя 1.4.2 js):

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

Примечание. Я не могу отменить регистрацию функции щелчка для тега привязки, поскольку он регистрируется динамически. И я должен показать ссылку в отключенном режиме.

241
Ankit

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

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>

Workaround

Нам, вероятно, нужно определить класс 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, проверьте условие (или сам атрибут disabled) и ничего не делайте в случае.

$("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()).

Золтан Тамаси отмечено в комментарии that "в некоторых случаях событие click уже связано с какой-то" реальной "функцией (например, с использованием knockoutjs). В этом случае упорядочение обработчика событий может вызвать некоторые проблемы. Поэтому я реализовал отключенные ссылки, привязав обработчик возврата false к событиям ссылки 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");
});

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

Ложный обработчик кликов

Добавьте/удалите функцию 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" вместе с атрибутом/class disabled.

474
Adriano Repetti

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

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

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

Для подробной информации проверьте это ссылка

21
Ankit

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

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

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

Как

  1. Включите этот CSS, поскольку это первая линия защиты. Это предполагает, что вы используете селектор a.disabled

    a.disabled {
      pointer-events: none;
      cursor: default;
    }
    
  2. Затем создайте экземпляр этого класса по готовности (с необязательным селектором):

      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
11
kross

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

$(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: изменено "вживую" на "включено".

5
Kees C. Bakker

Я закончил с решением ниже, которое может работать с атрибутом, <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();
})
1
isapir

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

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

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

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

0
mkk

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

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

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

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

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

0
Pranav

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, в этом случае решение не будет работать .

0
Yevgeniy Afanasyev