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

참고-앵커 태그가 동적으로 등록되어 있으므로 클릭 기능을 등록 취소 할 수 없습니다. 링크를 비활성화 모드로 표시해야합니다.

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

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속성 도 포함하는 것을 잊지 마십시오 .

CSS로 수정했습니다.

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

앵커 태그에 적용된 CSS 위의 경우 클릭 이벤트가 비활성화됩니다.

자세한 내용은이 링크를 확인 하십시오

솔루션 (특히 @AdrianoRepetti)을 게시 한 모든 사람 덕분에 여러 가지 접근 방식을 결합하여 고급 disabled기능 을 제공하고 브라우저 간 작동합니다. 코드는 다음과 같습니다 (ES2015 및 원하는대로 커피 스크립트).

이것은 여러 수준의 방어를 제공하므로 disable로 표시된 앵커는 실제로 그렇게 동작합니다. 이 방법을 사용하면 다음과 같은 앵커를 얻을 수 없습니다.

• 딸깍 하는 소리
• 탭하여 돌아 가기
• 탭하면 다음 초점 요소로 초점이 이동합니다.
• 앵커가 이후에 사용 가능한지 인식합니다.

어떻게

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

커피 스크립트 클래스 :

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

링크를 사용하지 않도록 설정하면 크롬에 나를 위해 작동 : 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();
    }
});

참고 : 향후 비활성화 / 활성화 링크에 대한 '실시간'문을 추가했습니다.
참고 2 : '실시간'을 '설정'으로 변경했습니다.

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 ancorJS 스크립트보다 동적으로 만들고 싶다면 다음과 같은 것이 필요합니다.

   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.

때로는 부트 스트랩 card-link이 클래스 사용을 권장합니다 .이 경우 솔루션 이 작동하지 않습니다 .

나는 아래의 솔루션으로 끝났는데, 이는 속성 <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;
}

자바 스크립트 (jQuery 지원) :

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

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

당신이 클릭 이벤트는 단순히 실행되지해야 원하는 경우, 링크를 비활성화 할 수 없습니다 링크에서.Removeaction

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

추가 정보 :- 비활성화 할 수있는 요소

나는 같은 것을 할 것입니다

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

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

이런 식으로 작동해야합니다. 사용하지 않으려는 링크에 대한 클래스를 추가 한 다음 누군가 링크를 클릭하면 false를 반환합니다. 그것들을 사용하려면 클래스를 제거하십시오.

터치 장치에서 다른 페이지에 액세스하기위한 링크를 비활성화하려면 :

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

Razor (.cshtml)에서 다음을 수행 할 수 있습니다.

@{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>

이를 사용하여 asp.net의 하이퍼 링크 또는 html의 링크 단추를 비활성화 할 수 있습니다.

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

또 다른 가능한 방법이 있고 내가 가장 좋아하는 방법이 있습니다. 기본적으로 라이트 박스가 div를 배치하고 z-index를 사용하여 전체 페이지를 비활성화하는 것과 같은 방식입니다. 다음은 내 프로젝트의 관련 스 니펫입니다. 이것은 모든 브라우저에서 작동합니다 !!!!!

자바 스크립트 (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는 앵커의 위치 (이미지는 단지 화살표)를 찾아서 디스 에이 블러를 맨 위에 놓습니다. 디스 에이 블러의 이미지는 반투명 회색 사각형으로, 링크에 맞게 HTML에서 디스 에이 블러의 너비 / 높이를 변경하여 비활성화되어 있음을 나타냅니다. 플로팅은 페이지 크기를 동적으로 조정할 수있게하며, 디스 에이 블러는 windowResizer ()에서 적절하게 따릅니다. 구글을 통해 적합한 이미지를 찾을 수 있습니다. 단순화를 위해 관련 CSS를 인라인으로 배치했습니다.

어떤 조건에 따라

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

나는 이것들 중 많은 것이 과잉 생각이라고 생각합니다. 원하는 클래스를 추가하십시오 (예 :) disabled_link.
그런 다음 CSS에 .disabled_link { display: none }
Boom이 표시되도록하십시오. 이제 사용자가 링크를 볼 수 없으므로 클릭에 대해 걱정할 필요가 없습니다. 그들이 클릭 가능한 링크를 만족시키기 위해 무언가를한다면, jQuery :로 클래스를 제거하면
$("a.disabled_link").removeClass("super_disabled")됩니다. 붐 완료!