jQuery를 사용하여 앵커를 활성화 또는 비활성화하는 방법은 무엇입니까?

jQuery를 사용하여 앵커를 활성화 또는 비활성화하는 방법은 무엇입니까?

앵커가 지정된을 따르지 못하게하려면 다음을 사용하는 href것이 좋습니다 preventDefault().

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

보다:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

SO에 대한이 이전 질문을 참조하십시오.

jQuery는 링크를 비활성화

현재 작업중 인 앱은 자바 스크립트와 함께 CSS 스타일로 수행합니다.

a.disabled { color:gray; }

그런 다음 링크를 비활성화 할 때마다 전화합니다.

$('thelink').addClass('disabled');

그런 다음 'thelink'에 대한 클릭 핸들러에서 태그를 항상 확인합니다.

if ($('thelink').hasClass('disabled')) return;

나는 여기서 훨씬 더 좋아하는 답을 찾았다.

다음과 같습니다 :

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

활성화하려면 href 속성을 설정해야합니다.

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

그러면 앵커 요소가 일반 텍스트가되고 그 반대도 마찬가지입니다.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

더 좋은 해결책은 비활성화 된 데이터 속성을 설정하고 클릭시 확인하는 것입니다. 이 방법으로 자바 스크립트가 아약스 호출이나 일부 계산으로 끝날 때까지 앵커를 일시적으로 비활성화 할 수 있습니다. 비활성화하지 않으면 몇 번 빠르게 클릭 할 수 있으므로 바람직하지 않습니다 ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

나는 jsfiddle 예제를 만들었다 : http://jsfiddle.net/wgZ59/76/

선택된 답변이 좋지 않습니다.

포인터 이벤트 CSS 스타일을 사용하십시오 . (Rashad Annara가 제안한대로)

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

앵커에 "disabled"속성을 추가하면 다음과 같은 전역 CSS 규칙이있는 경우 작업을 수행합니다.

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

아래 줄을보십시오

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz, <a>태그 를 사용 중지하더라도 href작동하지만 제거해야합니다 href.

아래 줄을 사용하도록 설정하려는 경우

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

false를 반환하는 것만 큼 간단합니다.

전의.

jQuery("li a:eq(0)").click(function(){
   return false;
})

또는

jQuery("#menu a").click(function(){
   return false;
})

$('#divID').addClass('disabledAnchor');

CSS 파일에서

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

$("a").click(function(event) {
  event.preventDefault();
});

이 메소드를 호출하면 이벤트의 기본 조치가 트리거되지 않습니다.

페이지와의 모든 상호 작용을 차단하려는 경우 jQuery BlockUI 플러그인 을 볼 수 있습니다

당신은 그들이 당신이 그들을 어떻게 원치 않았는지, 또는 어떻게 불가능하게 할 것인지를 지정하지 않았습니다.

먼저 JQuery의 Attribute Functions를 사용 하고 click 또는 문서 로드 와 같은 이벤트 에서 해당 기능이 발생 하도록 값을 disabled로 설정하는 방법을 알아 내고자 합니다.

앵커 태그 내에 텍스트 또는 html 컨텐츠를 넣어야하지만 요소를 클릭 할 때 조치를 취하지 않으려는 경우 (예 : 페이지 링크가 비활성화되어 있기 때문에 페이지 매김 링크를 사용하지 않는 상태로 설정하려는 경우) 현재 페이지)에서 간단히 href를 잘라냅니다. ;)

<a>3 (current page, I'm totally disabled!)</a>

@ michael-meadows의 대답은이 문제를 해결했지만 jQuery / JS와 함께 작업 해야하는 시나리오를 여전히 해결하고있었습니다. 이 경우, 경우 당신은 HTML 자체를 작성을 제어 할 수있는 솔루션을 순수 HTML의 하나입니다 때문에, 단순히 X-보내고 href를 태그하는 것은, 당신이해야 할 모든입니다!

href를 유지하는 jQuery finagling이없는 다른 솔루션을 사용하려면 href에 #을 넣어야하지만 페이지가 맨 위로 튀어 오르고 일반 오래된 비활성화되기를 원합니다. 또는 비워 두지 만 브라우저에 따라 여전히 맨 위로 이동하는 것과 같은 작업을 수행하며 IDE에 따라 잘못된 HTML입니다. 그러나 분명히a 태그는 HREF가없는 완전히 유효한 HTML입니다.

마지막으로, 당신은 말할 수 있습니다 : 좋아, 왜 태그를 완전히 덤프하지 않습니까? 종종 a태그를 사용할 수 없기 때문에 태그는 Bootstrap의 페이지 매김과 같이 CSS 프레임 워크 또는 사용중인 컨트롤의 스타일링 용도로 사용됩니다.

http://twitter.github.io/bootstrap/components.html#pagination

위의 답변을 조합 하여이 문제를 해결했습니다.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

앵커 태그로 동작 할 필요가 없다면이를 대체하는 것이 좋습니다. 예를 들어 앵커 태그가

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

그런 다음 jquery를 사용하면 링크 대신 텍스트를 표시해야 할 때이 작업을 수행 할 수 있습니다.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

따라서 앵커 태그를 div 태그로 간단히 바꿀 수 있습니다. 이것은 훨씬 쉬우 며 (단 2 줄) 의미 론적으로도 정확합니다 (지금 링크가 필요하지 않기 때문에 링크가 없어야 함)

disabled 속성이있는 요소를 비활성화하거나 활성화합니다.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );