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.