Chrome/WebKit/Safari에서 앵커 비활성화

Question

다음 코드를 고려해보세요.

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

IE 및 FF에서는 앵커를 클릭할 수 없게 되지만 WebKit 기반 브라우저(Google Chrome 및 Safari)에서는 아무 작업도 수행하지 않습니다.비활성화된 속성의 좋은 점은 쉽게 제거할 수 있고 href 및 onclick 속성에 영향을 주지 않는다는 것입니다.

원하는 결과를 얻는 방법에 대한 제안 사항이 있습니까?답변은 다음과 같아야 합니다.

• AJAX 호출이 실행되는 동안 양식 입력 컨트롤을 비활성화하고 싶기 때문에 쉽게 되돌릴 수 있습니다.
• IE, FF 및 WebKit에서 작동해야 함

Answer 1

이러한 앵커 요소에 바인딩된 onclick 이벤트 핸들러가 있다고 가정합니다.이벤트 핸들러에서 "disabled" 속성을 확인하고 해당 속성이 설정된 경우 이벤트를 취소하도록 하세요.이벤트 핸들러는 다음과 같습니다.

$("a").click(function(event){
  if (this.disabled) {
    event.preventDefault();
  } else {
    // make your AJAX call or whatever else you want
  }
});

스타일시트 규칙을 설정하여 커서를 변경할 수도 있습니다.

a[disabled=disabled] { cursor: wait; }

편집 - 의견에 제안된 대로 "비활성화" 확인을 단순화했습니다.

Answer 2

다른 조건 등에 따라 이 속성을 활성화/비활성화하는 앵커가 많은 사이트에서 이 동작을 수정해야 했습니다.이상적이지는 않을 수도 있지만 이와 같은 상황에서 각 앵커의 코드를 개별적으로 수정하지 않으려는 경우 모든 앵커에 대해 다음과 같은 방법을 사용하면 됩니다.

$('a').each(function () {
    $(this).click(function (e) {
        if ($(this).attr('disabled')) {
            e.preventDefault();
            e.stopImmediatePropagation();
        }
    });
    var events = $._data ? $._data(this, 'events') : $(this).data('events');
    events.click.splice(0, 0, events.click.pop());
});

그리고:

a[disabled] {
    color: gray;
    text-decoration: none;
}