jQuery는 링크를 비활성화


284

누구든지 사용하지 않고 jquery에서 링크를 비활성화하는 방법을 알고 return false;있습니까?

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

감사. 데이브

업데이트 코드는 다음과 같습니다. .expanded클래스가 적용된 후해야 할 일은 비활성화 된 링크를 다시 활성화하는 것입니다.

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

7
요구 사항이 false를 반환하지 않는 이유는 무엇입니까? 이것을 사용하고 나서 더 이상 적용되지 않을 때 이벤트 핸들러를 삭제하십시오 (또는 언급 된 "일부 항목"의 상태에 따라 다른 값을 리턴하도록 조건부 설정).
— Quentin 2016 년

동일한 클릭 동작에서 링크를 따라 가기 전에 일부 전처리를 시도하고 있습니까? 즉, 두 번의 클릭을 제안하는 것이 아니라 사용자 클릭 링크를 제안하는 것입니다.
— 나사로

그렇지 않으면 문제 공간을 더 잘 이해하면 답이 향상되므로이 방법을 사용하는 이유를 설명 할 수 있습니다.
— 나사로

@lazarus, 나는 같은 링크에서 두 번의 클릭을 제안하고 있습니다. 1 먼저 몇 가지 작업을 수행 한 다음 2 번째는 링크를 링크로 처리합니다.
— davebowker 2016 년

@ daviddorward, 지금까지는 false를 반환하려고 시도했으며 두 번째 클릭이 발생하지 않도록 내 목표의 두 번째 부분으로 넘어갑니다. 짧은 예제를 작성할 수 있다면 가장 감사 할 것입니다.
— davebowker 2016 년

답변:


364
$('#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);
    } 
});

3
jQuery를 함께 1.7+ 당신은 온 / 오프에 사용할 수 있습니다 stackoverflow.com/questions/209029/...
— 랜스 클리블랜드

href와 onclick이 있으면 $ ( "# myLink"). attr ( 'onclick', '') .click (function (e) {e.preventDefault ();});
— 로널드 맥도날드

아약스와 jquery를 통해 실현되어 스크레이퍼가 이러한 링크를 얻지 못하도록 콜백이있는 href 구매를 숨길 수 있습니다. 정말 고마워!
— Cesar Bielich

이 게시물은 bootstrap을 사용하는 가장 쉬운 방법 입니다.
— shaijut

107

이 시도:

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

편집하다-

업데이트 된 코드에서 :

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

3
onclick 이벤트를 통해 작업을 수행하는 링크를 비활성화하는 빠른 방법이기 때문에 href를 사용하면 매우 좋습니다. 매우 영리한!
— daitangio

브라우저가 URI에 #을 추가하지 못하게하는 방법href="#"
— Abela

65

나처럼 Google을 통해 여기에 온 다른 사람들을 위해-여기 다른 접근법이 있습니다.

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 = "buttonstyle"

뿐만 아니라이 두

class = "buttonstyle disabled"

jQuery로 클래스를 쉽게 추가하고 제거 할 수 있습니다. href를 만질 필요가 없습니다 ...

나는 jQuery를 좋아한다! ;-)


2
이것은 링크에 목표가 없다고 가정합니다 :)
— dstarh

2
이 공상을 모두 수행하는 대신, dom에서 onclick을 더 높게 고정하고 on()모든 a.disabled링크 를 필터링하고 기본값을 방지 하는 데 사용하는 것이 좋습니다. 그런 다음 비활성화 된 클래스를 켜거나 끄면 "활성화"될 때 링크가 자동으로 처리됩니다.
— CodeChimp

"== true"필요 없음-addClass ( 'disabled')가 관계없이 실행됩니다. if(disabledCondition)
— Fox Wilson

1
@fwilson, 당신은 완전히 정확하지만, 초보자 프로그래머에게는 == true. :)
— carmenism

그것을 단순화하지 않는 특별한 이유는 if ($(this).hasClass('disabled')) { e.preventDefault(); }무엇입니까?
— Mir

58

다음은 간결하고 최소화 된 스크립팅을 선호하는 대체 CSS / jQuery 솔루션입니다.

CSS :

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

jQuery :

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

7
Mozilla에서 : "경고 : 비 SVG 요소에 CSS에서 포인터 이벤트를 사용하는 것은 실험적입니다.이 기능은 CSS3 UI 초안 사양의 일부로 사용되었지만 많은 공개 된 문제로 인해 CSS4로 연기되었습니다."
— duelin markers

1
좋은 고려 사항이지만 대부분의 최신 브라우저에서 잘 작동합니다.
— Peter DeWeese 1

당신은 체인 고려하는 것이 좋습니다 .prop("tabindex", "-1");후addClass
— 올렉 Grishko

19

다음을 클릭하여 링크 클릭을 제거 할 수 있습니다.

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

다음과 같은 방법으로 링크를 다시 활성화 할 수 있습니다.

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

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


1
다른 사람에 비해 쉽게 켜고 끌 수 있습니다.
— python1981

2
"링크에 'disabled'속성을 사용할 수 없습니다." 버튼과 비활성화 링크 사이에 일관성이없는 이유가 궁금합니다. "비활성화"는 링크에서도 작동합니다. Chevy 자동차의 경우 정지하려면 브레이크 페달을 밟아야하지만 다른 자동차 제조업체의 경우 지붕에있는이 레버를 사용해야합니다.
— eaglei22

14

href 경로를 사용하면 저장할 수 있습니다

비활성화하려면 :

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

그런 다음 다음을 사용하여 다시 활성화하십시오.

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

어떤 경우에는 클릭 이벤트가 이미 다른 곳에 바인딩되어 있고 제어 할 수 없기 때문에이 방법으로해야했습니다.


12

나는 항상 링크를 비활성화하기 위해 jQuery에서 이것을 사용합니다.

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

당신은 또한 사용할 수 $("form a").attr("disabled", false);다시 사용할 수 있도록
— 알렉산더 Ryhlitsky

9

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;
    }

1
나는 전에이 CSS 속성을 보지 못했지만 이것은 나를 위해 하이퍼 링크를 비활성화하는 가장 간단한 방법입니다. pointer-events: none앵커 요소에서 속성 이 포함 된 클래스를 제거 하면 클릭 할 때 이전에 수행 한 모든 작업으로 되돌아갑니다. 기본 하이퍼 링크 인 href경우 속성 에서 URL 탐색으로 돌아가고 클릭 이벤트 핸들러가 설정되어 있으면 다시 활성화됩니다. href값을 저장 하고 처리기를 클릭하는 것보다 훨씬 간단 합니다.
— Philip Stratford

나는이 솔루션을 좋아합니다. 가장 간단한 것입니다.
— Louis Louis

아무것도 작동하지 않을 때 (그리고 거의이 경로를 포기하는) 소수의 "솔루션"에서이 보석에 왔습니다 . 번거롭지 않은 솔루션입니다. 그리고 정말로 효과가있는 유일한 것입니다. 명성.
— user12379095

5

"체크 아웃하는 동안 항목을 편집하고 와일드 와일드 웨스트 클릭을 어디서나 방지하기위한 체크 아웃"기능

$('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>

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

건배!


3

당신은 당신이 여기에 대답을 찾을 수 있어야 합니다 .

이 우아한 솔루션에 대해 @Will과 @Matt에게 감사드립니다.

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


2

그냥 물건을 발동시키고 깃발을 설정하고 거짓을 반환하십시오. 플래그가 설정되어 있으면 아무것도하지 마십시오.


클래스를 설정 한 다음 나중에 해당 클래스를 호출하지만 false를 반환하면 링크가 호출되지 않습니다.
— davebowker 2016 년

1

unbind()에서 더 이상 사용되지 않으므로 대신 메소드를 jQuery 3사용하십시오 off().

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

0

나는 이것이 jQuery가 아니라는 것을 알고 있지만 간단한 CSS로 링크를 비활성화 할 수 있습니다.

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

HTML은 다음과 같습니다

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

0

이것은 onclick 속성이 인라인으로 설정된 링크에서 작동합니다. 또한 나중에 "false return"을 제거하여 활성화 할 수 있습니다.

        //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; ", ""));
        });

-2

그냥 사용하십시오 $("a").prop("disabled", true);. 이것은 실제로 링크 해제 요소를 비활성화합니다. 이어야 prop("disabled", true)합니다. 사용하지 마십시오attr("disabled", true)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.