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

Bất cứ ai cũng biết làm thế nào để vô hiệu hóa một liên kết trong jquery mà KHÔNG sử dụng return false;?

Cụ thể, những gì tôi đang cố gắng là vô hiệu hóa liên kết của một mục, thực hiện nhấp chuột vào nó bằng cách sử dụng jquery để kích hoạt một số nội dung, sau đó bật lại liên kết đó để nếu nó được nhấp lại, nó sẽ hoạt động như mặc định.

Cảm ơn. Dave

CẬP NHẬT Đây là mã. Những gì nó cần làm sau khi .expandedlớp đã được áp dụng là để kích hoạt lại liên kết bị vô hiệu hóa.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});

$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

Điều đó sẽ ngăn hành vi mặc định của một siêu liên kết, đó là truy cập vào href href.

Từ hướng dẫn jQuery :

Đối với nhấp chuột và hầu hết các sự kiện khác, bạn có thể ngăn chặn hành vi mặc định - tại đây, theo liên kết đến jquery.com - bằng cách gọi event.preventDefault () trong trình xử lý sự kiện

Nếu bạn chỉ muốn preventDefault()nếu một điều kiện nhất định được đáp ứng (ví dụ như một cái gì đó bị ẩn), bạn có thể kiểm tra mức độ hiển thị của ul với lớp được mở rộng . Nếu nó hiển thị (nghĩa là không bị ẩn), liên kết sẽ kích hoạt như bình thường, vì câu lệnh if sẽ không được nhập và do đó hành vi mặc định sẽ không bị ngăn chặn:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});

Thử cái này:

$("a").removeAttr('href');

BIÊN TẬP-

Từ mã cập nhật của bạn:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);

Đối với những người khác đến đây thông qua google như tôi - đây là một cách tiếp cận khác:

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')

Hãy nhớ rằng: không chỉ đây là một lớp css

lớp = "kiểu nút"

nhưng cả hai

class = "vô hiệu hóa nút"

để bạn có thể dễ dàng thêm và xóa các lớp khác với jQuery. Không cần phải chạm ...

Tôi yêu jQuery! ;-)

Đây là một giải pháp css / jQuery thay thế mà tôi thích vì độ chặt chẽ và kịch bản tối thiểu hóa của nó:

css:

a.disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: default;
}

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});

Bạn có thể loại bỏ nhấp để liên kết bằng cách làm theo;

$('#link-id').unbind('click');

Bạn có thể kích hoạt lại liên kết bằng cách làm theo,

$('#link-id').bind('click');

Bạn không thể sử dụng thuộc tính 'khuyết tật' cho các liên kết.

Nếu bạn đi theo tuyến đường, bạn có thể lưu nó

Để tắt:

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

Sau đó kích hoạt lại bằng cách sử dụng:

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

Trong một trường hợp, tôi đã phải làm theo cách này vì các sự kiện nhấp đã bị ràng buộc ở một nơi khác và tôi không kiểm soát được nó.

Tôi luôn sử dụng điều này trong jQuery để vô hiệu hóa các liên kết

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

ví dụ liên kết 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>

sử dụng cái này trong jQuery

    $('#BT_Download').attr('disabled',true);

thêm cái này vào css:

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

Fav của tôi trong "thanh toán để chỉnh sửa một mặt hàng và ngăn chặn - nhấp chuột tây hoang dã đến bất cứ nơi nào - trong khi thanh toán"

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

Vì vậy, nếu tôi muốn rằng tất cả các liên kết bên ngoài trong thanh công cụ hành động thứ hai sẽ bị vô hiệu hóa trong khi ở "chế độ chỉnh sửa" như được mô tả ở trên, tôi sẽ thêm vào chức năng chỉnh sửa

$('#actionToolbar .external').attr('disabled', true);

Liên kết ví dụ sau khi cháy:

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

Và bây giờ bạn CÓ THỂ sử dụng tài sản bị vô hiệu hóa cho các liên kết

Chúc mừng!

Bạn nên tìm bạn trả lời ở đây .

Cảm ơn @Will và @Matt cho giải pháp thanh lịch này.

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});

bạn chỉ có thể ẩn và hiển thị các liên kết như bạn muốn

$(link).hide();
$(link).show();

Chỉ cần kích hoạt công cụ, thiết lập một số cờ, trả lại sai. Nếu cờ được đặt - không làm gì cả.

unbind()không được dùng nữa jQuery 3, sử dụng off()phương thức thay thế:

$("a").off("click");

Tôi biết điều này không phải với jQuery nhưng bạn có thể vô hiệu hóa một liên kết với một số css đơn giản:

a[disabled] {
  z-index: -1;
}

HTML sẽ trông như thế nào

<a disabled="disabled" href="/start">Take Survey</a>

Điều này hoạt động cho các liên kết có thuộc tính onclick được đặt nội tuyến. Điều này cũng cho phép bạn sau đó loại bỏ "return false" để kích hoạt nó.

        //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; ", ""));
        });

Chỉ cần sử dụng $("a").prop("disabled", true);. Điều này thực sự sẽ vô hiệu hóa phần tử liên kết. Cần phải có prop("disabled", true). Đừng dùngattr("disabled", true)