복붙노트

[JQUERY] 어떻게 해제 HTML 링크에

JQUERY

어떻게 해제 HTML 링크에

해결법

  1. 1.당신은 (휴대용 방식) 링크를 비활성화 할 수 없습니다. 이러한 기술 중 하나 (자신의 장점과 단점을 각각 하나)를 사용할 수 있습니다.

    당신은 (휴대용 방식) 링크를 비활성화 할 수 없습니다. 이러한 기술 중 하나 (자신의 장점과 단점을 각각 하나)를 사용할 수 있습니다.

    이것은 올바른 방법 일 (나중에 참조) 브라우저의 대부분을 지원합니다 때 그것을 할해야합니다 :

    a.disabled {
    pointer-events: none;
}

    그것은 예를 들어, 부트 스트랩 3.x를가하는 일입니다. 현재 (2016)이 아니라 단지 크롬, 파이어 폭스와 오페라 (19+)에 의해 지원합니다. 인터넷 익스플로러 버전 11에서하지만 그것은 외부 요소 등에서 사용할 수 있지만 링크이를 지원하기 시작했다 :

    span.disable-links {
    pointer-events: none;
}

    와:

    <span class="disable-links"><a href="#">...</a></span>

    우리는 아마하는 CSS의 포인터 이벤트에 대한 클래스 정의해야합니다 : 없음하지만 우리는 장애인 속성 대신 CSS 클래스를 재사용 할 경우? 엄밀히 장애인 말하기는 에 대한 지원되지하지만 브라우저는 알 수없는 속성에 대해 불평하지 않습니다. IE는 포인터 이벤트를 무시하지만 IE의 특정 disabled 속성을 존중합니다 disabled 속성을 사용하여; 다른 CSS의 준수 브라우저는 알 수없는 disabled 속성과 명예 포인터 이벤트를 무시합니다. 설명하는 것보다 쓰기에 쉽게 :

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

    IE (11) 또 다른 방법은 인라인 블록 또는 블록에 연결 요소의 세트를 표시하는 것이다

    <a style="pointer-events: none; display: inline-block;" href="#">...</a>

    당신이 (당신이 당신의 HTML을 변경할 수 있습니다) IE를 지원해야하지만, 경우이 휴대용 솔루션이 될 수 있습니다 ...

    이 모든하시기 바랍니다 참고 포인터 이벤트 비활성화 만 ... 포인터 이벤트를 말했다. 링크는 여전히 당신은 또한 다른 기술 중 하나가 여기에 설명 적용 할 필요가 키보드를 통해 탐색 할 것이다.

    설명 CSS 기술 위에서와 함께 당신이 집중해야 할 요소를 방지하기 위해 표준이 아닌 방법으로 tabIndex를 사용할 수 있습니다 :

    <a href="#" disabled tabindex="-1">...</a>

    그때 당신이 사용하기 전에 스스로를 테스트 할 수 있습니다 많은 브라우저와의 호환성을 확인하지 않습니다. 그것은 자바 스크립트없이 일할 수있는 장점이있다. 불행하게도 (하지만 분명히)의 tabindex는 CSS에서 변경할 수 없습니다.

    자바 스크립트 함수에 HREF를 사용 조건 (또는 장애인 속성 자체)를 확인하고 경우에 아무것도하지 않습니다.

    $("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

    비활성화 링크에이 작업을 수행 :

    $("td > a").attr("disabled", "disabled");

    그들을 다시 활성화 :

    $("td > a").removeAttr("disabled");

    대신 됐나으로합니다 ( "[장애인]") 당신이 ( "해제") .attr 사용할 수 있습니다! = 정의되지 않은 (jQuery를 1.6 항상 속성이 설정되지 않은 경우 정의되지 않은 반환합니다)) (하지만 훨씬 더 분명하다 (이 팁 데이브 스튜어트에게 감사). 나는, 비표준 방식으로 사용할 속성을 사용하여이 걱정이라면 .hasClass ( "장애인")와 됐나 ( "[장애인]")를 클래스와 속성을 교체하고 교체 (추가하고있어 여기에 있습니다 addClass ()와 removeClass (와 제거)).

    졸탄 Tamási 이벤트 핸들러 순서가 어떤 문제를 일으킬 수있는 경우 (예 knockoutjs를 사용하는) 실제 "기능"어떤 경우에는 클릭 이벤트가 이미 일부에 바인딩 "고 코멘트에 주목했다. 그래서 나는 수익을 바인딩하여 장애인 링크를 구현 링크의 touchstart, mousedown과를 keyDown 이벤트에 거짓 핸들러입니다. 그것은 몇 가지 단점이 있습니다 (이것은 터치 링크를 시작으로 스크롤 방지 할 수 있습니다) "하지만 키보드 이벤트를 처리하면 키보드 탐색을 방지 할 수있는 이점이있다.

    HREF이 해제되지 않은 경우 사용자가 수동으로 해당 페이지를 방문하는 것이 가능합니다.

    HREF 특성을 취소합니다. 이 코드를 사용하면 이벤트 핸들러를 추가하지 않습니다하지만 당신은 링크 자체를 변경합니다. 해제 링크에이 코드를 사용 :

    $("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

    그리고이 일을 다시 사용하도록 설정 :

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

    (당신이 비활성화 링크와 함께 더 많은 일을 할 필요가없는 경우)하지만 때문에 링크를 따라 다양한 방법의 더 호환 될 수 개인적으로 난 아주 많이이 솔루션을 좋아하지 않는다.

    / 추가 false를 돌려 온 클릭 기능을 제거, 링크는 다음되지 않습니다. 해제 링크 :

    $("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

    그들을 다시 활성화 :

    $("td > a").removeAttr("disabled").off("click");

    내가 대신 첫 번째의 솔루션을 선호하는 이유가 있다고 생각하지 않습니다.

    스타일링이 훨씬 더 간단하다, 당신은 다음과 같은 CSS 규칙을 사용할 수 있도록 우리가 비활성화 된 속성을 추가 한 링크를 해제하는 데 사용하는 어떤 솔루션 :

    a[disabled] {
    color: gray;
}

    당신은 속성 대신 클래스를 사용하는 경우 :

    a.disabled {
    color: gray;
}

    당신은 UI 프레임 워크를 사용하는 경우에는 장애인 링크가 제대로 스타일하지 않는 것을 볼 수 있습니다. 부트 스트랩 3.x를, 예를 들어, 핸들이 시나리오와 버튼을 제대로 사용할 속성 및 .disabled 클래스와 두 스타일된다. 만약, 대신 링크를 삭제하고 (또는 다른 자바 스크립트 기술 중 하나를 사용하여)를 활성화로 href가없는 가 여전히 그린 있기 때문에 당신은 또한 스타일링 처리해야합니다.

    잊지 마세요 또한 아리아 장애인 = 장애인 속성 / 클래스와 함께 "true"로 속성을 포함한다.

  2. 2.CSS의 수정을 얻었다.

    CSS의 수정을 얻었다.

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

    CSS는 위의 클릭 이벤트가 비활성화됩니다 앵커 태그에 적용 할 때.

    자세한 내용은이 링크를 체크 아웃을 위해

  3. 3.(특히 @AdrianoRepetti) 솔루션을 게시 모두에게 감사합니다, 나는 (그리고 크로스 브라우저를 작동) 좀 더 고급 장애인 기능을 제공하기 위해 여러 방법을 결합했다. 코드는 (당신의 선호도에 따라 모두 ES2015과 커피 스크립트) 이하입니다.

    (특히 @AdrianoRepetti) 솔루션을 게시 모두에게 감사합니다, 나는 (그리고 크로스 브라우저를 작동) 좀 더 고급 장애인 기능을 제공하기 위해 여러 방법을 결합했다. 코드는 (당신의 선호도에 따라 모두 ES2015과 커피 스크립트) 이하입니다.

    비활성화로 표시하는 앵커가 실제로 같은 행동 때문에 이것은 방어의 여러 수준을 제공합니다. 이 방법을 사용하여, 당신은 당신이 할 수없는 앵커를 얻을 :

    NPM 설치 -S key.js

    import {Key, Keycodes} from 'key.js'

export default class AnchorDisabler {
  constructor (config = { selector: 'a.disabled' }) {
    this.config = config
    $(this.config.selector)
      .click((ev) => this.onClick(ev))
      .keyup((ev) => this.onKeyup(ev))
      .focus((ev) => this.onFocus(ev))
  }

  isStillDisabled (ev) {
    //  since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event
    let target = $(ev.target)
    if (target.hasClass('disabled') || target.prop('disabled') == 'disabled') {
      return true
    }
    else {
      return false
    }
  }

  onFocus (ev) {
    //  if an attempt is made to focus on a disabled element, just move it along to the next focusable one.
    if (!this.isStillDisabled(ev)) {
      return
    }

    let focusables = $(':focusable')
    if (!focusables) {
      return
    }

    let current = focusables.index(ev.target)
    let next = null
    if (focusables.eq(current + 1).length) {
      next = focusables.eq(current + 1)
    } else {
      next = focusables.eq(0)
    }

    if (next) {
      next.focus()
    }
  }

  onClick (ev) {
    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }

  onKeyup (ev) {
    // We are only interested in disabling Enter so get out fast
    if (Key.isNot(ev, Keycodes.ENTER)) {
      return
    }

    // disabled could be dynamically removed
    if (!this.isStillDisabled(ev)) {
      return
    }

    ev.preventDefault()
    return false
  }
}

    class AnchorDisabler
  constructor: (selector = 'a.disabled') ->
    $(selector).click(@onClick).keyup(@onKeyup).focus(@onFocus)

  isStillDisabled: (ev) =>
    ### since disabled can be a class or an attribute, and it can be dynamically removed, always recheck on a watched event ###
    target = $(ev.target)
    return true if target.hasClass('disabled')
    return true if target.attr('disabled') is 'disabled'
    return false

  onFocus: (ev) =>
    ### if an attempt is made to focus on a disabled element, just move it along to the next focusable one. ###
    return unless @isStillDisabled(ev)

    focusables = $(':focusable')
    return unless focusables

    current = focusables.index(ev.target)
    next = (if focusables.eq(current + 1).length then focusables.eq(current + 1) else focusables.eq(0))

    next.focus() if next


  onClick: (ev) =>
    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  onKeyup: (ev) =>

    # 13 is the js key code for Enter, we are only interested in disabling that so get out fast
    code = ev.keyCode or ev.which
    return unless code is 13

    # disabled could be dynamically removed
    return unless @isStillDisabled(ev)

    ev.preventDefault()
    return false

  4. 4.요소를보십시오 :

    요소를보십시오 :

    $(td).find('a').attr('disabled', 'disabled');

    링크를 사용하지 않도록 설정하면 크롬에 나를 위해 작동 : http://jsfiddle.net/KeesCBakker/LGYpz/.

    파이어 폭스는 좋은 플레이하지 않는 것 같습니다. 이 예제는 작동 :

    <a id="a1" href="http://www.google.com">Google 1</a>
<a id="a2" href="http://www.google.com">Google 2</a>

$('#a1').attr('disabled', 'disabled');

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

    참고 : 장애인 미래를위한 '라이브'문을 추가은 / 링크를 활성화. 주 2 : '에'에 '라이브'로 변경.

  5. 5.부트 스트랩 4.1을 사용할 수와 아리아 장애인 = "true"로 속성라는 이름의 클래스를 제공합니다.

    부트 스트랩 4.1을 사용할 수와 아리아 장애인 = "true"로 속성라는 이름의 클래스를 제공합니다.

    예"

    <a href="#" 
        class="btn btn-primary btn-lg disabled" 
        tabindex="-1" 
        role="button" aria-disabled="true"
>
    Primary link
</a>

    더 getbootstrap.com에

    그래서 당신은 동적으로 만들고 싶어, 당신은 버튼이나 ANCOR보다 클 경우 상관하지 않으려면 JS 스크립트에서 당신은 그런 뭔가가 필요

       let $btn=$('.myClass');
   $btn.attr('disabled', true);
   if ($btn[0].tagName == 'A'){
        $btn.off();
        $btn.addClass('disabled');
        $btn.attr('aria-disabled', true);
   }

    하지만 조심해야 해

    이 솔루션은 BTN 링크 BTN 클래스와 링크를 사용할 수 있습니다.

    때때로 부트 스트랩이 경우 솔루션하지 않습니다 일에, 카드 링크 클래스를 사용하는 것이 좋습니다.

  6. 6.나는 속성, , 또는 클래스 :

    나는 속성, , 또는 클래스 :

    CSS 스타일 :

    a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

    (jQuery를 준비에서) 자바 스크립트 :

    $("a[disabled], a.disabled").on("click", function(e){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        e.preventDefault();
})

  7. 7.당신이 클릭 이벤트가 단순히 링크에서 작업을 제거 실행되지해야 원하는 경우, 링크를 비활성화 할 수 없습니다.

    당신이 클릭 이벤트가 단순히 링크에서 작업을 제거 실행되지해야 원하는 경우, 링크를 비활성화 할 수 없습니다.

    $(td).find('a').attr('href', '');

    더 많은 정보를 원하시면 : - 요소가 비활성화 할 수 있습니다

  8. 8.내가 좋아하는 뭔가를 할 것입니다

    내가 좋아하는 뭔가를 할 것입니다

    $('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

    이 같은 작업을해야합니다. 당신은 당신이 사용 중지하려는 링크 클래스를 추가하고 누군가를 클릭 할 때 당신은 false를 돌려줍니다. 그들을 그냥 클래스를 제거 할 수 있도록합니다.

  9. 9.액세스 터치 장치에서 다른 페이지로 해제 연결하려면 :

    액세스 터치 장치에서 다른 페이지로 해제 연결하려면 :

    if (control == false)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

  10. 10.당신이 할 수있는 면도기 (.cshtml)에서 :

    당신이 할 수있는 면도기 (.cshtml)에서 :

    @{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>

  11. 11.당신은 HTML에서 asp.net 또는 링크 버튼의 하이퍼 링크을 사용하지 않도록 설정할 수 있습니다.

    당신은 HTML에서 asp.net 또는 링크 버튼의 하이퍼 링크을 사용하지 않도록 설정할 수 있습니다.

    $("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

  12. 12.다른 하나의 가능한 방법, 그리고 내가 가장 좋아하는 일이있다. 기본적으로는 같은 방식으로 라이트 박스 사업부를 배치 및 Z- 인덱스 만지작으로, 전체 페이지를 비활성화합니다. 여기에 내 프로젝트에서 관련 조각입니다. 이것은 모든 브라우저에서 작동 !!!!!

    다른 하나의 가능한 방법, 그리고 내가 가장 좋아하는 일이있다. 기본적으로는 같은 방식으로 라이트 박스 사업부를 배치 및 Z- 인덱스 만지작으로, 전체 페이지를 비활성화합니다. 여기에 내 프로젝트에서 관련 조각입니다. 이것은 모든 브라우저에서 작동 !!!!!

    자바 스크립트 (jQuery를)

    var windowResizer = function(){
        var offset = $('#back').offset();   
        var buttontop = offset.top;
        var buttonleft = offset.left;
        $('#backdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
        offset = $('#next').offset();
        buttontop = offset.top;
        buttonleft = offset.left;
        $('#nextdisabler').css({'top':buttontop,'left':buttonleft,'visibility':'visible'});
}

$(document).ready(function() {
    $(window).resize(function() {   
        setTimeout(function() {
            windowResizer();
        }, 5); //when the maximize/restore buttons are pressed, we have to wait or it will fire to fast
    });
});

    과에서 HTML

    <a href="" id="back" style="float: left"><img src="images/icons/back.png" style="height: 50px; width: 50px" /></a>
<a href="" id="next" style="float: right"><img src="images/icons/next.png" style="height: 50px; width: 50px" /></a>
<img id="backdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>
<img id="nextdisabler" src="images/icons/disabled.png" style="visibility: hidden; position: absolute; padding: 5px; height: 62px; width: 62px; z-index: 9000"/>

    리사이는 앵커의 (이미지 그냥 화살표입니다) 위치를 찾아 상단에있는 disabler를 배치 그래서. disabler의 이미지는 반투명 회색 사각형이 비활성화되어 있음을 보여주고 (귀하의 링크를 일치하도록 HTML의 disablers의 너비 / 높이를 변경)입니다. 부동 페이지는 동적으로 크기를 조정할 수 있도록하고, disablers이 windowResizer에 소송을 따를 것이다 (). 당신이 구글을 통해 적절한 이미지를 찾을 수 있습니다. 나는 간단하게하기 위해 관련 CSS를 인라인으로 배치했다.

    다음 몇 가지 조건에 따라,

    $('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

  13. 13.나는이 많은 생각을 통해 생각합니다. disabled_link처럼, 당신이 원하는 클래스를 추가합니다. 그리고 만드는 CSS를 .disabled_link이 {표시 : 없음} 그들이 그것을 클릭에 대해 당신이 걱정하지 않도록 사용자가 링크를 볼 수 없습니다 지금 붐. 그들은 클릭 할 수있는 링크를 충족하기 위해 뭔가를 할 경우, 단순히 jQuery로 클래스를 제거합니다. $ ( "a.disabled_link")를 removeClass를 ( "super_disabled"). 붐 완료!

    나는이 많은 생각을 통해 생각합니다. disabled_link처럼, 당신이 원하는 클래스를 추가합니다. 그리고 만드는 CSS를 .disabled_link이 {표시 : 없음} 그들이 그것을 클릭에 대해 당신이 걱정하지 않도록 사용자가 링크를 볼 수 없습니다 지금 붐. 그들은 클릭 할 수있는 링크를 충족하기 위해 뭔가를 할 경우, 단순히 jQuery로 클래스를 제거합니다. $ ( "a.disabled_link")를 removeClass를 ( "super_disabled"). 붐 완료!

    14. from https://stackoverflow.com/questions/10276133/how-to-disable-html-links by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] 어떻게 JQuery와 또는 자바 스크립트와 객체의 배열을 정렬하려면 [중복]  (0) 2020.10.06
[JQUERY] `on`와`live` 또는`bind`의 차이점은 무엇입니까?  (0) 2020.10.06
[JQUERY] 선택된 라디오 버튼의 값을 얻을 JQuery와  (0) 2020.10.06
[JQUERY] 방지 때 내부 소자 스크롤 위치에 도달 위쪽 / 아래쪽 부모 요소의 스크롤? [복제]  (0) 2020.10.06
[JQUERY] jQuery로 클리어 폼 필드  (0) 2020.10.06
,

티스토리툴바