앵커 링크를 클릭 할 수 없거나 비활성화하려면 어떻게해야합니까?

사용자가 클릭하면 비활성화하려는 앵커 링크가 있습니다. 또는 텍스트 주위에서 앵커 태그를 제거하되 텍스트는 유지하십시오.

<a href='' id='ThisLink'>some text</a>

.attr("disabled", "disabled");
비활성화 된 속성을 성공적으로 추가했지만 링크를 클릭 할 수 있음을 추가하여 버튼으로 쉽게이 작업을 수행 할 수 있습니다 .
텍스트에 밑줄이 있든 없든 상관하지 않습니다.

단서가 있습니까?

잘못된 뮤지션을 클릭하면 "Wrong"을 추가 한 다음 클릭 할 수 없게됩니다.
클릭하고 정확하면 "Awesome"을 추가 한 다음 모든 <a>태그 를 비활성화해야 합니다.

나는 당신이 무엇을 요구하고 있는지 깨달았습니다. 추악한 해결책이 있습니다.

var preventClick = false;

$('#ThisLink').click(function(e) {
    $(this)
       .css('cursor', 'default')
       .css('text-decoration', 'none')

    if (!preventClick) {
        $(this).html($(this).html() + ' lalala');
    }

    preventClick = true;

    return false;
});

가장 깨끗한 방법은 클릭을 비활성화하고 싶을 때 pointer-events : none 클래스를 추가하는 것입니다. 일반 라벨처럼 작동합니다.

.disableClick{
    pointer-events: none;
}

<a href='javascript:void(0);'>some text</a>

포인터 이벤트 CSS 스타일을 사용하십시오 . (Jason MacDonald가 제안했듯이)

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events를 참조 하십시오 . 대부분의 브라우저에서 지원됩니다.

다음과 같은 전역 CSS 규칙이있는 경우 앵커에 "disabled"속성을 간단히 추가하면됩니다.

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

$('a').removeAttr('href')

또는

$('a').click(function(){ return false})

상황에 따라 다름

부트 스트랩은 우리에게 .disabled수업을 제공합니다 . 이용하십시오.

그러나 .disabledclass는 'a'태그에 이미 'btn'클래스가있는 경우에만 작동합니다. 이전 'a'태그에서는 작동하지 않습니다. 이 btn클래스는 스타일 의미가 있기 때문에 어떤 상황에서는 적절하지 않을 수 있습니다. 커버 아래에 .disabled클래스 세트 pointer-events하는 noneSaroj 아얄 및 Vitrilo이 sugested 것처럼, 그래서 당신은 같은 일을 할 수있는 CSS를 만들 수 있습니다. (이 조언에 대해 Les Nightingill에게 감사드립니다).

css수업 추가 :

.disable_a_href{
    pointer-events: none;
}

이것을 추가하십시오 jquery:

$("#ThisLink").addClass("disable_a_href"); 

href앵커 태그에서 속성을 제거하기 만하면 됩니다.

가장 좋은 방법은 기본 작업을 방지하는 것입니다. 앵커 태그의 경우 기본 동작은 href지정된 주소 로 리디렉션됩니다 .

따라서 다음 자바 스크립트는 상황에서 가장 잘 작동합니다.

$('#ThisLink').click(function(e)
{
    e.preventDefault();
});

onclick 이벤트를 사용하여 클릭 동작을 비활성화 할 수 있습니다.

<a href='' id='ThisLink' onclick='return false'>some text</a>

또는 <a>태그 이외의 것을 사용할 수도 있습니다 .

Jason MacDonald 댓글이 저에게 효과적이며 Chrome, Mozila 및 IE에서 테스트되었습니다.

비활성화 효과를 보여주는 회색을 추가했습니다.

.disable_a_href{
    pointer-events: none;
    **color:#c0c0c0 !important;**
}

Jquery는 앵커 목록에서 첫 번째 요소 만 선택하고 메타 문자 (*)를 추가하여 id 인 모든 요소를 ​​선택 및 비활성화했습니다 #ThisLink.

$("#ThisLink*").addClass("disable_a_href"); 

한 줄의 jQuery 코드 작성

$('.hyperlink').css('pointer-events','none');

css 파일에 쓰려면

.hyperlink{
    pointer-events: none;
}

스타일 시트에 다음 클래스를 만듭니다.

  .ThisLink{
           pointer-events: none;
           cursor: default;
    }

이 클래스를 다음과 같이 동적으로 링크에 추가하십시오.

 <a href='' id='elemID'>some text</a>

    //   or using jquery
<script>
    $('#elemID').addClass('ThisLink');
 </script>

이 시도:

$('a').contents().unwrap();

SASS에서 간단히 :

.some_class{
     // styles...

     &.active {
       pointer-events:none;
     }
}

이것은 내가 비활성화하는 데 사용한 방법입니다.

$("#ThisLink").attr("href","javascript:;");

$('#ThisLink').one('click',function(){
  $(this).bind('click',function(){
    return false;
  });
});

이 작업을 수행하는 또 다른 방법이 될 수 있습니다 return false. 링크를 비활성화하는을 가진 핸들러는 한 번의 클릭 후에 추가됩니다.

가장 쉬운 방법

HTML에서 :

<a id="foo" disabled="true">xxxxx<a>

당신의 js에서 :

$('#foo').attr("disabled", false);

속성으로 사용하면 완벽하게 작동합니다.