Disable neo trong Chrome/WebKit/Safari

Question

Xét đoạn mã sau:

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

Trong IE và FF, điều này sẽ làm cho neo nhấp được, nhưng trong các trình duyệt dựa trên WebKit (Google Chrome và Safari) này không có gì. Điều thú vị về thuộc tính disabled là nó có thể dễ dàng bị loại bỏ và không ảnh hưởng đến các thuộc tính href và onclick.

Bạn có bất kỳ đề xuất nào về cách nhận kết quả mong muốn hay không. Câu trả lời phải là:

• Dễ dàng hoàn nguyên vì tôi muốn vô hiệu hóa điều khiển nhập biểu mẫu khi tôi có cuộc gọi AJAX đang chạy.
• Phải làm việc trong IE, FF, và WebKit

Answer 1

tôi giả sử rằng bạn có một xử lý sự kiện onclick bị ràng buộc vào những yếu tố neo. Chỉ cần trình xử lý sự kiện của bạn kiểm tra thuộc tính "đã tắt" và hủy sự kiện nếu nó được đặt. Trình xử lý sự kiện của bạn sẽ trông giống như sau:

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

Bạn cũng có thể đặt quy tắc biểu định kiểu để thay đổi con trỏ.

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

Chỉnh sửa - đơn giản hóa kiểm tra "đã tắt" như được đề xuất trong nhận xét.

Answer 2

Tôi phải khắc phục hành vi này trong một trang web có nhiều neo được bật/tắt với thuộc tính này theo các điều kiện khác, v.v. Có thể không lý tưởng, nhưng trong tình huống như vậy, nếu bạn không muốn sửa mã của mỗi neo cá nhân, điều này sẽ làm các trick cho tất cả các neo:

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

Và:

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