Tôi có một nút liên kết bên trong <td>mà tôi phải vô hiệu hóa. Điều này hoạt động trên IE nhưng không hoạt động trong Firefox và Chrome. Cấu trúc là - Liên kết bên trong a <td>. Tôi không thể thêm bất kỳ vùng chứa nào trong <td>(như div / span)

Tôi đã thử tất cả các cách sau nhưng không hoạt động trên Firefox (sử dụng 1.4.2 js):

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

Lưu ý - Tôi không thể hủy đăng ký chức năng nhấp cho thẻ neo vì nó được đăng ký động. VÀ TÔI PHẢI HIỂN THỊ LIÊN KẾT TRONG CHẾ ĐỘ TUYỆT VỜI.

Bạn không thể vô hiệu hóa một liên kết (theo cách di động). Bạn có thể sử dụng một trong những kỹ thuật này (mỗi kỹ thuật có lợi ích và nhược điểm riêng).

Cách CSS

Đây phải là cách đúng (nhưng xem sau) để làm điều đó khi hầu hết các trình duyệt sẽ hỗ trợ nó:

a.disabled {
    pointer-events: none;
}

Đó là những gì, ví dụ, Bootstrap 3.x làm. Hiện tại (2016) nó chỉ được hỗ trợ tốt bởi Chrome, FireFox và Opera (19+). Internet Explorer bắt đầu hỗ trợ điều này từ phiên bản 11 nhưng không dành cho các liên kết tuy nhiên nó có sẵn trong một yếu tố bên ngoài như:

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

Với:

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

Giải pháp thay thế

Chúng tôi, có lẽ, cần phải xác định một lớp CSS cho pointer-events: nonenhưng những gì nếu chúng ta tái sử dụng các disabledthuộc tính thay vì một lớp CSS? Nói đúng ra disabledlà không được hỗ trợ <a>nhưng các trình duyệt sẽ không phàn nàn về các thuộc tính không xác định . Sử dụng disabledthuộc tính IE sẽ bỏ qua pointer-eventsnhưng nó sẽ tôn vinh disabledthuộc tính cụ thể của IE ; các trình duyệt tuân thủ CSS khác sẽ bỏ qua thuộc tính và danh dự không xác định . Dễ viết hơn là giải thích:disabledpointer-events

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

Một tùy chọn khác cho IE 11 là đặt displaycác thành phần liên kết thành blockhoặc inline-block:

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

Lưu ý rằng đây có thể là một thiết bị cầm tay giải pháp nếu bạn cần hỗ trợ IE (và bạn có thể thay đổi HTML của mình) nhưng ...

Tất cả điều này nói xin lưu ý rằng pointer-eventschỉ vô hiệu hóa ... sự kiện con trỏ. Liên kết vẫn sẽ được điều hướng thông qua bàn phím sau đó bạn cũng cần áp dụng một trong những kỹ thuật khác được mô tả ở đây.

Tiêu điểm

Kết hợp với kỹ thuật CSS được mô tả ở trên, bạn có thể sử dụng tabindextheo cách không chuẩn để ngăn chặn một yếu tố được tập trung:

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

Tôi chưa bao giờ kiểm tra tính tương thích của nó với nhiều trình duyệt sau đó bạn có thể muốn tự kiểm tra nó trước khi sử dụng. Nó có lợi thế để làm việc mà không cần JavaScript. Thật không may (nhưng rõ ràng) tabindexkhông thể thay đổi từ CSS.

Đánh chặn nhấp chuột

Sử dụng một hrefhàm JavaScript, kiểm tra điều kiện (hoặc chính thuộc tính bị vô hiệu hóa) và không làm gì trong trường hợp.

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

Để vô hiệu hóa các liên kết làm điều này:

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

Để kích hoạt lại chúng:

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

Nếu bạn muốn thay vì .is("[disabled]")bạn có thể sử dụng .attr("disabled") != undefined(jQuery 1.6+ sẽ luôn trả về undefinedkhi thuộc tính không được đặt) nhưng is()rõ ràng hơn nhiều (nhờ Dave Stewart cho mẹo này). Xin lưu ý ở đây tôi đang sử dụng disabledthuộc tính theo cách không chuẩn, nếu bạn quan tâm đến điều này thì hãy thay thế thuộc tính bằng một lớp và thay thế .is("[disabled]")bằng .hasClass("disabled")(thêm và xóa bằng addClass()và removeClass()).

Zoltán Tamási lưu ý trong một nhận xét rằng "trong một số trường hợp, sự kiện nhấp đã bị ràng buộc với một số chức năng" thực "(ví dụ: sử dụng knoutoutjs) Trong trường hợp đó, việc xử lý sự kiện có thể gây ra một số rắc rối. xử lý sai đến của liên kết touchstart, mousedownvà keydowncác sự kiện. nó có một số nhược điểm (nó sẽ ngăn chặn cảm ứng năng cuộn bắt đầu vào liên kết)" nhưng xử lý sự kiện bàn phím cũng có lợi ích để ngăn chặn bàn phím điều hướng.

Lưu ý rằng nếu hrefkhông xóa, người dùng có thể truy cập trang đó theo cách thủ công.

Xóa liên kết

Xóa hrefthuộc tính. Với mã này, bạn không thêm trình xử lý sự kiện mà bạn tự thay đổi liên kết. Sử dụng mã này để vô hiệu hóa các liên kết:

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

Và cái này để kích hoạt lại chúng:

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

Cá nhân tôi không thích giải pháp này lắm (nếu bạn không phải làm nhiều hơn với các liên kết bị vô hiệu hóa) nhưng nó có thể tương thích hơn vì có nhiều cách để theo liên kết.

Xử lý nhấp chuột giả

Thêm / xóa một onclickchức năng trong đó bạn return false, liên kết sẽ không được theo dõi. Để tắt liên kết:

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

Để kích hoạt lại chúng:

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

Tôi không nghĩ có lý do để thích giải pháp này thay vì giải pháp đầu tiên.

Tạo kiểu

Kiểu dáng thậm chí còn đơn giản hơn, bất kể giải pháp nào bạn đang sử dụng để vô hiệu hóa liên kết chúng tôi đã thêm một disabledthuộc tính để bạn có thể sử dụng quy tắc CSS sau:

a[disabled] {
    color: gray;
}

Nếu bạn đang sử dụng một lớp thay vì thuộc tính:

a.disabled {
    color: gray;
}

Nếu bạn đang sử dụng khung UI, bạn có thể thấy các liên kết bị vô hiệu hóa không được tạo kiểu đúng cách. Bootstrap 3.x, ví dụ, xử lý tình huống này và nút được tạo kiểu chính xác cả với disabledthuộc tính và với .disabledlớp. Thay vào đó, nếu bạn xóa liên kết (hoặc sử dụng một trong các kỹ thuật JavaScript khác), bạn cũng phải xử lý kiểu dáng vì <a>không hrefcó vẫn được vẽ như được bật.

Ứng dụng Internet phong phú có thể truy cập (ARIA)

Đừng quên bao gồm một thuộc tính aria-disabled="true"cùng với disabledthuộc tính / lớp.

Có bản sửa lỗi trong css.

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

Trên css khi áp dụng cho thẻ neo sẽ vô hiệu hóa sự kiện nhấp chuột.

Để biết chi tiết kiểm tra liên kết này

Cảm ơn tất cả mọi người đã đăng các giải pháp (đặc biệt là @AdrianoRepetti), tôi đã kết hợp nhiều cách tiếp cận để cung cấp một số disabledchức năng nâng cao hơn (và nó hoạt động trên trình duyệt chéo). Mã bên dưới (cả ES2015 và coffeescript dựa trên sở thích của bạn).

Điều này cung cấp cho nhiều cấp độ phòng thủ để các Neo được đánh dấu là vô hiệu hóa thực sự hoạt động như vậy. Sử dụng phương pháp này, bạn có được một neo mà bạn không thể:

• nhấp chuột
• tab đến và nhấn return
• gắn thẻ vào nó sẽ chuyển trọng tâm sang phần tử có thể lấy nét tiếp theo
• Nó được biết nếu neo được kích hoạt sau đó

Làm thế nào để

1. Bao gồm css này, vì nó là tuyến phòng thủ đầu tiên. Điều này giả sử bộ chọn bạn sử dụng làa.disabled

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

2. Tiếp theo, khởi tạo lớp này khi sẵn sàng (với bộ chọn tùy chọn):

     new AnchorDisabler()

Lớp ES2015

npm install -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
  }
}

Lớp học văn bản:

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

Hãy thử yếu tố:

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

Vô hiệu hóa một liên kết hoạt động với tôi trong Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/ .

Firefox dường như không chơi tốt. Ví dụ này hoạt động:

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

Lưu ý: đã thêm một tuyên bố 'sống' cho các liên kết bị vô hiệu hóa / kích hoạt trong tương lai.
Lưu ý2: đã thay đổi 'trực tiếp' thành 'trên'.

Bootstrap 4.1 cung cấp một lớp có tên disabledvà aria-disabled="true"thuộc tính.

thí dụ"

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

Thêm nữa là trên getbootstrap.com

Vì vậy, nếu bạn muốn làm cho nó linh hoạt và you don't want to care if it is button or ancorhơn trong tập lệnh JS, bạn cần một cái gì đó tương tự

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

Nhưng hãy cẩn thận

Giải pháp chỉ hoạt động trên các liên kết với các lớp btn btn-link.

Đôi khi bootstrap khuyên bạn nên sử dụng card-linklớp, trong trường hợp này giải pháp sẽ không hoạt động .

Tôi đã kết thúc với giải pháp bên dưới, có thể hoạt động với thuộc tính <a href="..." disabled="disabled">hoặc lớp<a href="..." class="disabled"> :

Kiểu CSS:

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

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

Javascript (trong jQuery đã sẵn sàng):

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

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

bạn không thể vô hiệu hóa một liên kết, nếu bạn muốn rằng sự kiện nhấp chuột không nên sa thải sau đó chỉ cần Removecác actiontừ liên kết đó.

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

Để biết thêm thông tin: - Các yếu tố có thể bị vô hiệu hóa

Tôi sẽ làm một cái gì đó như

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

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

một cái gì đó như thế này sẽ làm việc Bạn thêm một lớp cho các liên kết bạn muốn bị vô hiệu hóa và sau đó bạn trả về false khi ai đó nhấp vào chúng. Để cho phép họ chỉ cần loại bỏ các lớp.

Để tắt liên kết để truy cập một trang khác trên thiết bị cảm ứng:

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

Trong Dao cạo (.cshtml) bạn có thể làm:

@{
    var isDisabled = true;
}

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

Bạn có thể sử dụng điều này để vô hiệu hóa Hyperlink của asp.net hoặc các nút liên kết trong html.

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

Có một cách khác có thể, và cách mà tôi thích nhất. Về cơ bản, nó giống như cách hộp đèn vô hiệu hóa toàn bộ trang, bằng cách đặt div và thay đổi chỉ số z. Đây là đoạn trích có liên quan từ một dự án của tôi. Điều này hoạt động trong tất cả các trình duyệt !!!!!

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

và trong 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"/>

Vì vậy, bộ chỉnh lưu tìm vị trí của neo (hình ảnh chỉ là mũi tên) và đặt bộ giải mã lên trên. Hình ảnh của bộ giải mã là một hình vuông màu xám mờ (thay đổi chiều rộng / chiều cao của bộ giải mã trong html để khớp với liên kết của bạn) để cho thấy rằng nó bị vô hiệu hóa. Việc thả nổi cho phép trang thay đổi kích thước một cách linh hoạt và các trình giải mã sẽ theo sau trong windowResizer (). Bạn có thể tìm thấy hình ảnh phù hợp thông qua google. Tôi đã đặt nội tuyến css có liên quan cho đơn giản.

sau đó dựa trên một số điều kiện,

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

Tôi nghĩ rằng rất nhiều trong số này là quá suy nghĩ. Thêm một lớp của bất cứ điều gì bạn muốn, như disabled_link.
Sau đó, làm cho css có .disabled_link { display: none }
Boom ngay bây giờ, người dùng không thể thấy liên kết để bạn không phải lo lắng về việc họ nhấp vào liên kết đó. Nếu họ làm điều gì đó để đáp ứng liên kết có thể nhấp được, chỉ cần xóa lớp bằng jQuery :
$("a.disabled_link").removeClass("super_disabled"). Bùng nổ xong!