Cara menonaktifkan tautan HTML

263

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.

Ankit
sumber
Hanya pertanyaan CSS: stackoverflow.com/questions/2091168/disable-a-link-using-css
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功

Jawaban:

510

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.

Adriano Repetti
sumber
2
Baik. Tetapi untuk pemeliharaan yang lebih mudah, saya akan menambahkan event handler klik ke semua td ayang mungkin dinonaktifkan, yang akan memanggil event.preventDefault()jika $(this).data('disabled')benar, dan kemudian mengatur data('disabled', true)ke tautan apa pun yang ingin saya nonaktifkan (salah untuk mengaktifkan, dll.)
ori
1
@Ankit Untuk penampilan, Anda memiliki CSS! Siapkan aturan untuk tautan 'dinonaktifkan' seperti ini a [dinonaktifkan] {color: grey}
Adriano Repetti
1
Pembaruan cepat pada dukungan browser . Perhatikan bahwa meskipun IE11 mendukung pointer-events, ada berita gembira kecil yang mengatakan itu tidak bekerja pada tautan: (...
Agustus
1
$(this).is('[disabled]')mungkin cara yang lebih baik untuk mendeteksi atribut yang dinonaktifkan
Dave Stewart
2
Jon, aku tidak begitu menyukainya. Pertama-tama karena navigasi keyboard masih berfungsi. Kedua karena itu tipuan (mereka mungkin berguna hanya jika tidak ada yang berfungsi). Ketiga karena beberapa orang menjaga Javascript dinonaktifkan dan dalam hal ini Anda tidak memiliki "level" perlindungan. Keempat karena ini adalah solusi paling rumit di sini (ketika beberapa garis Javascript dapat berfungsi)
Adriano Repetti
23

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

Ankit
sumber
1
Ini solusi yang bagus tetapi tidak didukung oleh ... tebak ... Internet Explorer.
Adriano Repetti
Ini didukung oleh semua browser
Ankit
1
Seharusnya tidak didukung untuk HTML di Internet Explorer dan Opera.
Adriano Repetti
@Ankit, tidak berfungsi di IE 9 dan di bawah. Apakah Anda menggunakan IE 10?
Mandeep Jain
4
Ini gagal menggunakan kasus keyboard seperti Adriano Repetti menyebutkan di atas. Pengguna masih dapat menabrak tautan dan tekan enter.
kandang rattler
12

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
Kross
sumber
Tetapi bagaimana jika kita membutuhkan solusi jQuery / javascript langsung? Lihat jawaban saya di bawah ini.
Jon Crawford
1
Nah, maka Anda menggunakan kelas ES2015 yang baru saja saya tambahkan!
Kross
7

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

Kees C. Bakker
sumber
6
Contoh baru juga bisa digunakan di Firefox. ;-) ini adalah firefix: D
Kees C. Bakker
Chrome mencegah navigasi di jsFiddle karena "Menolak untuk menampilkan dokumen karena tampilan dilarang oleh X-Frame-Options." Maaf jika contoh jsfiddle melakukan hal-hal aneh ;-)
Kees C. Bakker
Saya harus menunjukkan jangkar tag sebagai dinonaktifkan juga. Sama seperti yang ditunjukkan pada IE. Ditambah lagi, saya tidak ingin mengubah fungsi klik untuk memberi tanda centang jika dinonaktifkan
Ankit
Bagian pertunjukan dapat dilakukan dengan css dan menambahkan kelas yang membuatnya abu-abu. Keuntungan dari klik 'langsung' adalah Anda akan memperbaiki masalah untuk semua tautan. Jika saya dapat membantu lebih banyak, beri tahu saya. Semoga Anda berhasil.
Kees C. Bakker
Coba jawaban saya di bawah ini untuk solusi peramban sepenuhnya lintas!
Jon Crawford
4

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 .

Yevgeniy Afanasyev
sumber
1

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

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

Pranav
sumber
1
Ini tidak benar-benar menonaktifkan tautan. Elemen jangkar masih akan memicu, meskipun itu akan tetap berada di halaman yang sama.
Florian Margaine
0

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.

mkk
sumber
Ini tidak akan membantu. Saya harus mendaftar ulang acara klik dan fungsinya dinamis yang disebut. Setelah dihapus, saya tidak dapat mengaitkannya kembali
Ankit
0

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;
rgfpy
sumber
Jawaban saya juga berfungsi di ponsel. Browser yang sangat lintas. Lihat di bawah.
Jon Crawford
Ini salah, jika Anda setAttribute('href', '');dan url halaman adalah http://example.com/page/?query=somethingtautan ketika mengklik IE11 akan pergi ke http://example.com/page/. Solusi yang bisa digunakan adalahsetAttribute('href', '#');
Marco Demaio
0

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>
Joel Wiklund
sumber
-2

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; 
});
Mitesh
sumber
-2

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'});
Jon Crawford
sumber
4
Tidak downvoted, tapi dugaan saya: terlalu banyak overhead untuk hal sederhana, kode Anda tidak cukup berkomentar untuk jawaban pada SO. Ini juga merasa banyak peretasan, saya pribadi tidak akan menggunakannya.
Emile Bergeron
-5

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!

Jordan Michael Rushing
sumber
Dari pertanyaan: 'DAN SAYA HARUS MENUNJUKKAN LINK DALAM MODE CACAT.'
Marcelo
Yup, kamu benar. Saya melewatkan itu. Jadi saya akan mengatakan sebaliknya, pindahkan nilai href ke data-href $("td a").each(function(i,v){ $(this).data('href',this.href); $(this).attr('href','#').css('color','grey'); });Lalu ketika Anda ingin yang tidak dapat dihapus: $(this).attr('href',$(this).data('href')).css('color','blue');
Jordan Michael Rushing