Làm cách nào để bật hoặc tắt neo bằng jQuery?

Làm cách nào để bật hoặc tắt neo bằng jQuery?

Để ngăn chặn một neo theo sau chỉ định href, tôi sẽ đề nghị sử dụng preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

Xem:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28,29

Cũng xem câu hỏi trước đây trên SO:

jQuery vô hiệu hóa một liên kết

Ứng dụng tôi hiện đang làm việc với phong cách CSS kết hợp với javascript.

a.disabled { color:gray; }

Sau đó, bất cứ khi nào tôi muốn vô hiệu hóa một liên kết, tôi gọi

$('thelink').addClass('disabled');

Sau đó, trong trình xử lý nhấp chuột cho 'thelink', thẻ tôi luôn chạy kiểm tra điều đầu tiên

if ($('thelink').hasClass('disabled')) return;

Tôi tìm thấy một câu trả lời mà tôi thích hơn nhiều ở đây

Trông như thế này:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

Việc kích hoạt sẽ liên quan đến việc thiết lập thuộc tính href

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Điều này cung cấp cho bạn sự xuất hiện rằng phần tử neo trở thành văn bản bình thường và ngược lại.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

Tôi nghĩ rằng một giải pháp tốt hơn là đặt thuộc tính dữ liệu bị vô hiệu hóa và neo kiểm tra cho nó khi nhấp. Bằng cách này, chúng ta có thể vô hiệu hóa tạm thời một neo cho đến khi ví dụ javascript kết thúc bằng lệnh gọi ajax hoặc một số tính toán. Nếu chúng tôi không vô hiệu hóa nó, thì chúng tôi có thể nhanh chóng nhấp vào nó một vài lần, điều này là không mong muốn ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

Tôi đã tạo một ví dụ jsfiddle: http://jsfiddle.net/wgZ59/76/

Chọn câu trả lời là không tốt.

Sử dụng kiểu CSS sự kiện con trỏ . (Như Rashad Annara đề xuất)

Xem MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pulum-events . Nó được hỗ trợ trong hầu hết các trình duyệt.

Việc thêm thuộc tính "bị vô hiệu hóa" đơn giản vào neo sẽ thực hiện công việc nếu bạn có quy tắc CSS toàn cầu như sau:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Hãy thử các dòng dưới đây

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz, ngay cả khi bạn vô hiệu hóa <a>thẻ hrefsẽ hoạt động vì vậy bạn cũng phải loại bỏ href.

Khi bạn muốn bật, hãy thử các dòng dưới đây

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

Nó đơn giản như trả về false;

Ví dụ.

jQuery("li a:eq(0)").click(function(){
   return false;
})

hoặc là

jQuery("#menu a").click(function(){
   return false;
})

$('#divID').addClass('disabledAnchor');

Trong tập tin css

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

$("a").click(function(event) {
  event.preventDefault();
});

Nếu phương thức này được gọi, hành động mặc định của sự kiện sẽ không được kích hoạt.

Nếu bạn đang cố gắng chặn tất cả các tương tác với trang, bạn có thể muốn xem Plugin jQuery BlockUI

Bạn không bao giờ thực sự xác định cách bạn muốn họ bị vô hiệu hóa, hoặc điều gì sẽ gây ra việc vô hiệu hóa.

Trước tiên, bạn muốn tìm ra cách đặt giá trị thành bị vô hiệu hóa, vì bạn sẽ sử dụng Hàm thuộc tính của JQuery và để chức năng đó xảy ra trong một sự kiện , như nhấp chuột hoặc tải tài liệu.

Đối với các tình huống bạn phải đặt nội dung văn bản hoặc html trong thẻ neo, nhưng bạn đơn giản không muốn thực hiện bất kỳ hành động nào khi nhấp vào phần tử đó (như khi bạn muốn liên kết paginator ở trạng thái bị vô hiệu hóa vì nó trang hiện tại), chỉ cần cắt ra href. ;)

<a>3 (current page, I'm totally disabled!)</a>

Câu trả lời của @ michael-đồng cỏ đã cho tôi biết điều này, nhưng anh ấy vẫn đang giải quyết các tình huống mà bạn vẫn phải / đang làm việc với jQuery / JS. Trong trường hợp này, nếu bạn có quyền kiểm soát việc tự viết html, chỉ cần x-ing thẻ href là tất cả những gì bạn cần làm, vì vậy giải pháp là một HTML thuần túy!

Các giải pháp khác không có phần mềm xử lý jQuery giữ cho href yêu cầu bạn đặt # trong the href, nhưng điều đó khiến trang bị bật lên trên cùng và bạn chỉ muốn nó bị vô hiệu hóa cũ. Hoặc để trống, nhưng tùy thuộc vào trình duyệt, điều đó vẫn làm những thứ như nhảy lên trên cùng, và đó là HTML không hợp lệ theo các IDE. Nhưng rõ ràng một athẻ là HTML hoàn toàn hợp lệ mà không có HREF.

Cuối cùng, bạn có thể nói: Được rồi, tại sao không bỏ thẻ hoàn toàn hơn? Bởi vì thường thì bạn không thể, athẻ được sử dụng cho mục đích tạo kiểu trong khung CSS hoặc kiểm soát bạn đang sử dụng, như trình phân trang của Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination

Vì vậy, với sự kết hợp của các câu trả lời ở trên, tôi đã đưa ra điều này.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

Nếu bạn không cần nó hoạt động như một thẻ neo thì tôi muốn thay thế nó hơn. Ví dụ: nếu thẻ neo của bạn giống như

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

sau đó sử dụng jquery bạn có thể làm điều này khi bạn cần hiển thị văn bản thay vì liên kết.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

Vì vậy, theo cách này, chúng ta chỉ cần thay thế thẻ neo bằng thẻ div. Điều này dễ dàng hơn nhiều (chỉ 2 dòng) và cũng đúng về mặt ngữ nghĩa (vì hiện tại chúng tôi không cần liên kết nên không có liên kết)

Vô hiệu hóa hoặc kích hoạt bất kỳ yếu tố nào với thuộc tính bị vô hiệu hóa.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );