Saya memiliki tombol tautan di dalam <td>yang harus saya nonaktifkan. Ini berfungsi pada IE tetapi tidak berfungsi di Firefox dan Chrome. Struktur adalah - Tautan di dalam a <td>. Saya tidak bisa menambahkan wadah apa pun di <td>(seperti div / span)

Saya mencoba semua yang berikut tetapi tidak berhasil pada Firefox (menggunakan 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');

Catatan - Saya tidak dapat membatalkan registrasi fungsi klik untuk tag jangkar karena terdaftar secara dinamis. DAN SAYA HARUS MENUNJUKKAN LINK DALAM MODE CACAT.

Anda tidak dapat menonaktifkan tautan (dengan cara portabel). Anda dapat menggunakan salah satu teknik ini (masing-masing dengan kelebihan dan kekurangannya sendiri).

Cara CSS

Ini harus menjadi cara yang benar (tetapi lihat nanti) untuk melakukannya ketika sebagian besar browser akan mendukungnya:

a.disabled {
    pointer-events: none;
}

Itu yang, misalnya, Bootstrap 3.x lakukan. Saat ini (2016) hanya didukung oleh Chrome, FireFox, dan Opera (19+). Internet Explorer mulai mendukung ini dari versi 11 tetapi tidak untuk tautan namun tersedia di elemen luar seperti:

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

Dengan:

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

Penanganan masalah

Kami, mungkin, kebutuhan untuk mendefinisikan kelas CSS untuk pointer-events: nonetetapi bagaimana jika kita menggunakan kembali dengan disabledatribut bukan kelas CSS? Sebenarnya disabledtidak didukung untuk <a>tetapi browser tidak akan mengeluh untuk atribut yang tidak diketahui . Menggunakan disabledatribut IE akan mengabaikan pointer-eventstetapi akan menghormati disabledatribut spesifik IE ; browser yang sesuai dengan CSS lainnya akan mengabaikan atribut dan kehormatan yang tidak diketahui . Lebih mudah menulis daripada menjelaskan:disabledpointer-events

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

Opsi lain untuk IE 11 adalah mengatur displayelemen tautan ke blockatau inline-block:

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

Perhatikan bahwa ini mungkin solusi portabel jika Anda perlu mendukung IE (dan Anda dapat mengubah HTML) tetapi ...

Semua ini mengatakan harap dicatat bahwa pointer-eventsmenonaktifkan hanya ... acara pointer. Tautan masih dapat dinavigasi melalui keyboard maka Anda juga perlu menerapkan salah satu teknik lain yang dijelaskan di sini.

Fokus

Sehubungan dengan teknik CSS yang dijelaskan di atas, Anda dapat menggunakan tabindexcara yang tidak standar untuk mencegah elemen menjadi terfokus:

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

Saya tidak pernah memeriksa kompatibilitasnya dengan banyak browser maka Anda mungkin ingin mengujinya sendiri sebelum menggunakan ini. Ini memiliki keuntungan untuk bekerja tanpa JavaScript. Sayangnya (tapi jelas) tabindextidak dapat diubah dari CSS.

Mencegah klik

Gunakan hreffungsi a to JavaScript, periksa kondisinya (atau atribut yang dinonaktifkan itu sendiri) dan jangan lakukan apa-apa.

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

Untuk menonaktifkan tautan, lakukan ini:

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

Untuk mengaktifkannya kembali:

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

Jika Anda ingin, alih-alih .is("[disabled]")Anda dapat menggunakan .attr("disabled") != undefined(jQuery 1.6+ akan selalu kembali undefinedketika atribut tidak disetel) tetapi is()jauh lebih jelas (terima kasih kepada Dave Stewart untuk tip ini). Harap dicatat di sini saya menggunakan disabledatribut dengan cara yang tidak standar, jika Anda peduli dengan ini, maka ganti atribut dengan kelas dan ganti .is("[disabled]")dengan .hasClass("disabled")(menambah dan menghapus dengan addClass()dan removeClass()).

Zoltán Tamási mencatat dalam komentar bahwa "dalam beberapa kasus acara klik sudah terikat dengan beberapa fungsi" nyata "(misalnya menggunakan knockoutjs). Dalam hal ini, penangan event handler dapat menyebabkan beberapa masalah. Karenanya saya menerapkan tautan yang dinonaktifkan dengan mengikat pengembalian handler palsu ke tautan touchstart, mousedowndan keydownacara. Ada beberapa kelemahan (ini akan mencegah pengguliran sentuh dimulai pada tautan) " tetapi menangani acara keyboard juga memiliki manfaat untuk mencegah navigasi keyboard.

Perhatikan bahwa jika hreftidak dihapus, mungkin pengguna dapat mengunjungi halaman itu secara manual.

Kosongkan tautannya

Hapus hrefatributnya. Dengan kode ini Anda tidak menambahkan pengendali acara tetapi Anda mengubah tautannya sendiri. Gunakan kode ini untuk menonaktifkan tautan:

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

Dan ini untuk mengaktifkannya kembali:

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

Secara pribadi saya tidak terlalu menyukai solusi ini (jika Anda tidak perlu berbuat lebih banyak dengan tautan yang dinonaktifkan) tetapi mungkin lebih kompatibel karena berbagai cara untuk mengikuti tautan.

Penangan klik palsu

Tambah / hapus onclickfungsi tempat Anda return false, tautan tidak akan diikuti. Untuk menonaktifkan tautan:

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

Untuk mengaktifkannya kembali:

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

Saya tidak berpikir ada alasan untuk memilih solusi ini daripada yang pertama.

Styling

Styling bahkan lebih sederhana, solusi apa pun yang Anda gunakan untuk menonaktifkan tautan yang kami tambahkan disabledatribut sehingga Anda dapat menggunakan aturan CSS berikut:

a[disabled] {
    color: gray;
}

Jika Anda menggunakan kelas alih-alih atribut:

a.disabled {
    color: gray;
}

Jika Anda menggunakan kerangka UI, Anda mungkin melihat bahwa tautan yang dinonaktifkan tidak ditata dengan benar. Bootstrap 3.x, misalnya, menangani skenario ini dan tombolnya ditata dengan benar baik dengan disabledatribut maupun dengan .disabledkelas. Sebaliknya, jika Anda menghapus tautan (atau menggunakan salah satu teknik JavaScript lainnya), Anda juga harus menangani gaya karena <a>tanpanya hrefmasih dicat sebagaimana diaktifkan.

Aplikasi Internet Kaya yang Dapat Diakses (ARIA)

Jangan lupa juga menyertakan atribut aria-disabled="true"bersamaan dengan disabledatribut / kelas.

Mendapat perbaikan di css.

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

Di atas css bila diterapkan pada tag jangkar akan menonaktifkan acara klik.

Untuk perincian, periksa tautan ini

Terima kasih kepada semua orang yang memposting solusi (terutama @AdrianoRepetti), saya menggabungkan beberapa pendekatan untuk menyediakan beberapa disabledfungsionalitas yang lebih canggih (dan ini berfungsi lintas browser). Kode di bawah (baik ES2015 dan naskah kopi berdasarkan preferensi Anda).

Ini memberikan beberapa tingkat pertahanan sehingga Jangkar yang ditandai sebagai menonaktifkan benar-benar berperilaku seperti itu. Dengan menggunakan pendekatan ini, Anda mendapatkan jangkar yang tidak dapat:

• klik
• tab ke dan tekan kembali
• menabraknya akan memindahkan fokus ke elemen yang dapat difokuskan berikutnya
• ia sadar jika jangkar selanjutnya diaktifkan

Bagaimana caranya

1. Sertakan css ini, karena ini adalah garis pertahanan pertama. Ini mengasumsikan pemilih yang Anda gunakan adalaha.disabled

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

2. Selanjutnya, instantiate kelas ini pada siap (dengan pemilih opsional):

     new AnchorDisabler()

Kelas 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
  }
}

Kelas naskah:

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

Coba elemen:

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

Menonaktifkan tautan berfungsi untuk saya di Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/ .

Firefox sepertinya tidak bermain bagus. Contoh ini berfungsi:

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

Catatan: menambahkan pernyataan 'langsung' untuk tautan yang dinonaktifkan / diaktifkan di masa mendatang.
Note2: mengubah 'live' menjadi 'on'.

Bootstrap 4.1 menyediakan nama kelas disableddan aria-disabled="true"atribut.

contoh"

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

Lebih banyak ada di getbootstrap.com

Jadi jika Anda ingin membuatnya secara dinamis, dan you don't want to care if it is button or ancordaripada di skrip JS Anda memerlukan sesuatu seperti itu

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

Tapi hati-hati

Solusinya hanya berfungsi pada tautan dengan kelas btn btn-link.

Terkadang bootstrap merekomendasikan penggunaan card-linkkelas, dalam hal ini solusi tidak akan berfungsi .

Saya telah berakhir dengan solusi di bawah ini, yang dapat bekerja dengan atribut <a href="..." disabled="disabled">,, atau kelas <a href="..." class="disabled">:

Gaya CSS:

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

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

Javascript (siap dalam jQuery):

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

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

Anda tidak dapat menonaktifkan tautan, jika Anda ingin acara klik itu tidak boleh diaktifkan, cukup Removetautan actiondari itu.

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

Untuk Info Lebih Lanjut: - Elemen yang dapat Dinonaktifkan

Saya akan melakukan sesuatu seperti

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

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

sesuatu seperti ini seharusnya bekerja. Anda menambahkan kelas untuk tautan yang ingin Anda nonaktifkan dan kemudian Anda mengembalikan false ketika seseorang mengkliknya. Untuk mengaktifkannya cukup hapus kelas.

Untuk menonaktifkan tautan untuk mengakses halaman lain di perangkat sentuh:

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

Di Razor (.cshtml) Anda dapat melakukan:

@{
    var isDisabled = true;
}

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

Anda dapat menggunakan ini untuk menonaktifkan Hyperlink dari asp.net atau tombol tautan di html.

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

Ada satu cara lain yang mungkin, dan yang paling saya sukai. Pada dasarnya ini adalah cara yang sama dengan lightbox menonaktifkan seluruh halaman, dengan menempatkan div dan mengutak-atik z-index. Berikut cuplikan yang relevan dari proyek saya. Ini bekerja di semua browser !!!!!

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

dan dalam 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"/>

Jadi pengubah menemukan lokasi jangkar (gambar hanya panah) dan menempatkan disabler di atas. Gambar disabler adalah kotak abu-abu transparan (ubah lebar / tinggi disabler di html agar sesuai dengan tautan Anda) untuk menunjukkan bahwa itu dinonaktifkan. Apung memungkinkan halaman untuk mengubah ukuran secara dinamis, dan penonaktifan akan mengikuti di windowResizer (). Anda dapat menemukan gambar yang cocok melalui google. Saya telah menempatkan css yang relevan sebaris untuk kesederhanaan.

kemudian berdasarkan beberapa kondisi,

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

Saya pikir banyak dari ini terlalu banyak berpikir. Tambahkan kelas apa pun yang Anda inginkan disabled_link.
Kemudian buat css memiliki .disabled_link { display: none }
Boom sekarang pengguna tidak dapat melihat tautan sehingga Anda tidak perlu khawatir tentang mereka mengkliknya. Jika mereka melakukan sesuatu untuk memenuhi link yang dapat diklik, cukup menghapus kelas dengan jQuery:
$("a.disabled_link").removeClass("super_disabled"). Booming selesai!