휴대용 방식으로 링크를 비활성화 할 수 없습니다. 이러한 기술 중 하나를 사용할 수 있습니다 (각각의 장점과 단점이있는 기술).

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하지만 CSS 클래스 대신 속성 을 재사용 하면 disabled어떻게 될까요? 엄격하게 말하면 disabled지원되지 <a>않지만 브라우저는 알 수없는 속성에 대해 불평하지 않습니다 . disabled속성 IE를 사용하면 무시 pointer-events되지만 IE 특정 disabled속성 을 존중 합니다. 다른 CSS 호환 브라우저는 알 수없는 disabled 속성과 명예를 무시 합니다 pointer-events. 설명하는 것보다 작성하기가 더 쉽습니다.

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

IE 11의 또 다른 옵션은 또는 display에 링크 요소를 설정하는 것 입니다 .blockinline-block

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

IE를 지원해야하고 HTML을 변경할 수있는 경우 휴대용 솔루션 일 수 있지만 …

이 모든 것은 pointer-events… 포인터 이벤트 만 비활성화 한다는 점에 유의하십시오 . 키보드 를 통해 링크를 계속 탐색 할 수 있으며 여기에 설명 된 다른 기술 중 하나를 적용해야합니다.

초점

위에서 설명한 CSS 기술과 함께 tabindex요소가 초점을 맞추지 않도록 비표준 방식으로 사용할 수 있습니다 .

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

나는 많은 브라우저와의 호환성을 확인하지 않았으므로 이것을 사용하기 전에 직접 테스트 할 수 있습니다. JavaScript없이 작동하는 이점이 있습니다. 불행히도 (그러나 분명히) tabindexCSS에서 변경할 수는 없습니다.

인터셉트 클릭

hrefJavaScript 함수에 a 를 사용 하고 조건 (또는 비활성화 된 속성 자체)을 확인한 후 아무 것도 수행하지 마십시오.

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

졸탄 Tamási는 주석에서 언급 하는 이벤트 핸들러 주문이 어떤 문제를 일으킬 수있는 경우 (예 knockoutjs를 사용하는) 실제 “기능”어떤 경우에는 클릭 이벤트가 이미 일부에 바인딩됩니다. “그러므로 내가 수익을 바인딩하여 장애인 링크를 구현 링크의 거짓 처리기 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;
}

UI 프레임 워크를 사용하는 경우 비활성화 된 링크의 스타일이 올바르게 표시되지 않을 수 있습니다. 예를 들어, Bootstrap 3.x는이 시나리오를 처리하고 버튼은 disabled속성 및 .disabled클래스 모두에서 올바르게 스타일이 지정됩니다 . 대신 링크를 지우는 경우 (또는 다른 JavaScript 기술 중 하나를 사용하는 <a>경우) href는 여전히 활성화 된 것으로 페인트되어 있으므로 스타일링도 처리해야합니다 .

액세스 가능한 리치 인터넷 애플리케이션 (ARIA)

속성 / 클래스 aria-disabled="true"와 함께 disabled속성 도 포함하는 것을 잊지 마십시오 .

답변

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

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

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

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

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

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

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

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

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

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

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

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