jQuery 링크 비활성화

jQuery 링크 비활성화

를 사용하지 않고 jquery에서 링크를 비활성화하는 방법을 아는 사람은 누구나 있습니다.return false;?

특히, 제가 하려는 것은 항목의 링크를 비활성화하고, 일부 항목을 트리거하는 jquery를 사용하여 항목을 클릭한 다음, 해당 링크를 다시 활성화하여 다시 클릭하면 기본값으로 작동하도록 하는 것입니다.

감사합니다. 데이브

업데이트 코드입니다.다음에 수행해야 할 작업.expanded클래스가 적용됨은 비활성화된 링크를 다시 활성화하는 것입니다.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});

$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

이렇게 하면 지정된 href를 방문하는 하이퍼링크의 기본 동작이 방지됩니다.

jQuery 자습서에서:

클릭 및 기타 대부분의 이벤트의 경우 이벤트 핸들러에서 event.preventDefault()를 호출하여 기본 동작(jquery.com 링크 다음)을 방지할 수 있습니다.

원하신다면preventDefault()특정 조건이 충족된 경우에만(예를 들어 무언가가 숨겨져 있음) 클래스를 확장한 상태에서 ul의 가시성을 테스트할 수 있습니다.표시된 경우(예: 숨기지 않은 경우) 링크는 정상적으로 작동해야 합니다. if 문이 입력되지 않으므로 기본 동작이 방지되지 않습니다.

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});

사용해 보십시오.

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

편집-

업데이트된 코드에서:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);

저처럼 구글을 통해 이곳에 온 다른 사람들을 위해 - 여기 또 다른 접근법이 있습니다.

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

기억하세요: 이것만이 css 클래스가 아닙니다.

class="버튼 스타일"

하지만 이 두 사람도

class="버튼 스타일 사용 안 함"

따라서 jQuery를 사용하여 클래스를 쉽게 추가하거나 제거할 수 있습니다.href를 만질 필요가 없습니다...

저는 jQuery를 사랑합니다! ;-)

여기 대체 CSS/j가 있습니다.간결성과 최소화된 스크립팅을 위해 선호하는 솔루션 쿼리:

CSS:

a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});

다음을 통해 링크 클릭을 제거할 수 있습니다.

$('#link-id').unbind('click');

다음과 같이 링크를 다시 활성화할 수 있습니다.

$('#link-id').bind('click');

링크에는 '사용 안 함' 속성을 사용할 수 없습니다.

href 경로로 가면 저장할 수 있습니다.

비활성화 방법:

$('a').each(function(){
    $(this).data("href", $(this).attr("href")).removeAttr("href");
});

그런 다음 다음을 사용하여 다시 활성화합니다.

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

어떤 경우에는 클릭 이벤트가 이미 다른 곳에 바인딩되어 있어서 제어할 수 없었기 때문에 이러한 방식으로 작업을 수행해야 했습니다.

링크 비활성화를 위해 항상 jQuery에서 사용합니다.

$("form a").attr("disabled", "disabled");

html 링크 예:

        <!-- boostrap button + fontawesome icon -->
        <a class="btn btn-primary" id="BT_Download" target="_blank" href="DownloadDoc?Id=32">
        <i class="icon-file-text icon-large"></i>
        Download Document
        </a>

jQuery에서 사용

    $('#BT_Download').attr('disabled',true);

CSS에 추가:

    a[disabled="disabled"] {
        pointer-events: none;
    }

내가 좋아하는 기능은 "체크아웃 시 항목을 편집하고 - 체크아웃 중에 와일드 와일드 웨스트가 아무 곳이나 클릭하는 것을 방지하기 위한" 기능입니다.

$('a').click(function(e) {
    var = $(this).attr('disabled');
    if (var === 'disabled') {
        e.preventDefault();
    }
});

따라서 위에서 설명한 대로 "편집 모드"에 있는 동안 두 번째 작업 도구 모음의 모든 외부 링크를 비활성화하려면 편집 기능을 추가합니다.

$('#actionToolbar .external').attr('disabled', true);

화재 후 연결 예:

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

이제 비활성화된 속성을 링크에 사용할 수 있습니다.

건배!

그냥 숨어서 원하는 대로 링크를 보여주면 됩니다.

$(link).hide();
$(link).show();

뭔가를 촉발하고, 깃발을 세우고, 거짓으로 반환하면 됩니다.플래그가 설정된 경우 아무것도 수행하지 않습니다.

여기서 답을 찾을 수 있습니다.

@Will과 @Matt에게 이 우아한 솔루션을 제공해 주셔서 감사합니다.

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});

unbind()에서 더 이상 사용되지 않음jQuery 3을 사용합니다.off()대신 방법:

$("a").off("click");

나는 이것이 jQuery와 관련이 없다는 것을 알지만 당신은 몇 가지 간단한 css로 링크를 비활성화할 수 있습니다.

a[disabled] {
  z-index: -1;
}

HTML은 다음과 같이 보입니다.

<a disabled="disabled" href="/start">Take Survey</a>

기본값을 설정하고 false를 반환하기만 하면 됩니다.

   $('#your-identifier').click(function(e) {
        e.preventDefault();
        return false;
    });

이 링크는 비활성화되지만 클릭 가능한 아이콘(손) 아이콘이 표시됩니다.그것도 아래와 같이 제거할 수 있습니다.

$('#your-identifier').css('cursor', 'auto');

이것은 온클릭 속성이 인라인으로 설정된 링크에 대해 작동합니다.이렇게 하면 나중에 "거짓 반환"을 제거하여 사용 가능으로 설정할 수도 마찬가지입니다.

        //disable all links matching class
        $('.yourLinkClass').each(function(index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", "return false; " + OnClickValue);
        });

        //enable all edit links
        $('.yourLinkClass').each(function (index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", OnClickValue.replace("return false; ", ""));
        });

백엔드 엔지니어로서 이 작업을 수행하는 방법에 대해 고민하는 데 시간이 좀 걸렸지만, 정확히 같은 문제를 해결한 방법은 다음과 같습니다.

const resendCodeTimeOutPeriodInMs = 30000; // 30seconds.

function resend2faCodeOnLogin(sendByEmail) {

const resendCodeLinkElement = $('#resendCodeLink');

const disabledState = resendCodeLinkElement.attr('disabled');
if (disabledState === 'disabled') {
    resendCodeLinkElement.preventDefault();
} else {
    resendCodeLinkElement.attr("disabled", true);
    resendCodeLinkElement.addClass('disabled');

    submitForm('#twoFactorResendCodeForm', (response) => {
        setTimeout(function () {
            $('#resendCodeLink').removeClass('disabled');
            resendCodeLinkElement.attr("disabled", false);
        }, resendCodeTimeOutPeriodInMs); 

    }, (response) => {
        console.error(response);
    });
}
}

웹에서 잘 알려진 예에서 가져온 표준 CSS:

a.disabled {
opacity: 0.5;
pointer-events: none;
cursor: default;

내 접근 방식은 UX가 다시 클릭하기 전에 지정된 버튼을 30초 동안 사용할 수 없도록 하는 것이었습니다.

그냥 사용하기$("a").prop("disabled", true);이렇게 하면 정말로 연결 해제 요소가 비활성화됩니다.이어야 .prop("disabled", true) 사용하지 attr("disabled", true)

언급URL : https://stackoverflow.com/questions/970388/jquery-disable-a-link