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

Html / 글쓴이

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