jQuery를 사용하여 하이퍼 링크 비활성화

jQuery를 사용하여 하이퍼 링크 비활성화

---

<a href="gohere.aspx" class="my-link">Click me</a>

나는했다

$('.my-link').attr('disabled', true);

하지만 작동하지 않았다

jquery를 사용하여 하이퍼 링크를 비활성화하는 쉬운 방법이 있습니까? href를 제거 하시겠습니까? 차라리 href로 바이올린을 연주하지 않을 것입니다. 따라서 href를 제거하지 않고도 할 수 있다면 좋을 것입니다.

---

false를 반환하는 클릭 핸들러를 바인딩 할 수 있습니다.

$('.my-link').click(function () {return false;});

다시 활성화하려면 핸들러의 바인딩을 해제하십시오.

$('.my-link').unbind('click');

참고 disabled이 형태의 입력으로 만 설계 되었기 때문에 작동하지 않습니다.

---

jQuery는 이미 이것을 예상했으며 jQuery 1.4.3부터 바로 가기를 제공합니다.

$('.my-link').bind('click', false);

바인딩 해제 / 재 활성화 :

$('.my-link').unbind('click', false);

---

나는 그것이 오래된 질문이라는 것을 알고 있지만 여전히 해결되지 않은 것 같습니다. 내 솔루션을 따릅니다 ...

다음 전역 핸들러를 추가하기 만하면됩니다.

$('a').click(function()
{
     return ($(this).attr('disabled')) ? false : true;
});

다음은 간단한 데모입니다. http://jsbin.com/akihik/3

disabled 속성이있는 모든 링크에 다른 스타일을 제공하기 위해 약간의 CSS를 추가 할 수도 있습니다.

예 :

a[disabled]
{
    color: grey; 
}

어쨌든 disabled 속성이 a태그에 유효하지 않은 것 같습니다 . w3c 사양을 따르고 싶다면 html5 호환 data-disabled속성을 쉽게 채택 할 수 있습니다 . 이 경우 이전 스 니펫을 수정하고 $(this).data('disabled').

---

href속성을 제거하는 것은 확실히 갈 길로 보입니다. 어떤 이유로 나중에 필요한 경우 다른 속성에 저장합니다. 예 :

$(".my-link").each(function() {
    $(this).attr("data-oldhref", $(this).attr("href"));
    $(this).removeAttr("href");
});

이것은 사용자 정의 CSS를 작성하지 않고 링크가 비활성화 된 것처럼 보이게하는 유일한 방법입니다. 클릭 핸들러를 false로 바인딩하면 링크가 일반 링크처럼 보이지만 클릭 할 때 아무 일도 일어나지 않아 사용자에게 혼란을 줄 수 있습니다. 클릭 핸들러 경로로 이동하려면 적어도 .addClass("link-disabled")해당 클래스와의 링크를 일반 텍스트처럼 표시하는 CSS를 작성합니다.

---

$('.my-link').click(function(e) { e.preventDefault(); }); 

다음을 사용할 수 있습니다.

$('.my-link').click(function(e) { return false; }); 

그러나 많은 jQuery 코드에서 광범위하게 사용되지만 더 비밀 스럽기 때문에 직접 사용하고 싶지 않습니다.

---

pointer-events가 지원 (에 올 때 CSS 속성은 부족한 조금 caniuse.com )하지만 매우 간결입니다 :

.my-link { pointer-events: none; } 

---

function EnableHyperLink(id) {
        $('#' + id).attr('onclick', 'Pagination("' + id + '")');//onclick event which u 
        $('#' + id).addClass('enable-link');
        $('#' + id).removeClass('disable-link');
    }

    function DisableHyperLink(id) {
        $('#' + id).addClass('disable-link');
        $('#' + id).removeClass('enable-link');
        $('#' + id).removeAttr('onclick');
    }

.disable-link
{
    text-decoration: none !important;
    color: black !important;
    cursor: default;
}
.enable-link
{
    text-decoration: underline !important;
    color: #075798 !important;
    cursor: pointer !important;
}

---

The disabled attribute isn't valid on all HTML elements I believe, see the MSDN article. That and the proper value for disabled is simply "disabled". Your best approach is to bind a click function that returns false.

---

Append a class containing pointer-events:non

.active a{ //css
text-decoration: underline;
background-color: #fff;
pointer-events: none;}


$(this).addClass('active');

---

Below will replace the link with it's text

$('a').each(function () {
    $(this).replaceWith($(this).text());
});

Edit :

Above given code will work with hyperlinks with text only, it will not work with images. When we'll try it with image link it won't show any image.

To make this code compatible with image links following will work fine

// below given function will replace links with images i.e. for image links
$('a img').each(function () {
    var image = this.src;
    var img = $('<img>', { src: image });
    $(this).parent().replaceWith(img);
});

// This piece of code will replace links with its text i.e. for text links
$('a').each(function () {
    $(this).replaceWith($(this).text());
});

explanation : In above given code snippets, in first snippet we are replacing all the image links with it's images only. After that we are replacing text links with it's text.

---

This also works well. Is simple, lite, and doesn't require jQuery to be used.

<a href="javascript:void(0)">Link</a>

---

Try:

$(this).prop( "disabled", true );

참고URL : https://stackoverflow.com/questions/5085584/disable-a-hyperlink-using-jquery