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.
javascript
jquery
html
css
Ankit
sumber
sumber
Jawaban:
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:
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:
Dengan:
Penanganan masalah
Kami, mungkin, kebutuhan untuk mendefinisikan kelas CSS untuk
pointer-events: none
tetapi bagaimana jika kita menggunakan kembali dengandisabled
atribut bukan kelas CSS? Sebenarnyadisabled
tidak didukung untuk<a>
tetapi browser tidak akan mengeluh untuk atribut yang tidak diketahui . Menggunakandisabled
atribut IE akan mengabaikanpointer-events
tetapi akan menghormatidisabled
atribut spesifik IE ; browser yang sesuai dengan CSS lainnya akan mengabaikan atribut dan kehormatan yang tidak diketahui . Lebih mudah menulis daripada menjelaskan:disabled
pointer-events
Opsi lain untuk IE 11 adalah mengatur
display
elemen tautan keblock
atauinline-block
:Perhatikan bahwa ini mungkin solusi portabel jika Anda perlu mendukung IE (dan Anda dapat mengubah HTML) tetapi ...
Semua ini mengatakan harap dicatat bahwa
pointer-events
menonaktifkan 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
tabindex
cara yang tidak standar untuk mencegah elemen menjadi terfokus: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)
tabindex
tidak dapat diubah dari CSS.Mencegah klik
Gunakan
href
fungsi a to JavaScript, periksa kondisinya (atau atribut yang dinonaktifkan itu sendiri) dan jangan lakukan apa-apa.Untuk menonaktifkan tautan, lakukan ini:
Untuk mengaktifkannya kembali:
Jika Anda ingin, alih-alih
.is("[disabled]")
Anda dapat menggunakan.attr("disabled") != undefined
(jQuery 1.6+ akan selalu kembaliundefined
ketika atribut tidak disetel) tetapiis()
jauh lebih jelas (terima kasih kepada Dave Stewart untuk tip ini). Harap dicatat di sini saya menggunakandisabled
atribut 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 denganaddClass()
danremoveClass()
).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
,mousedown
dankeydown
acara. 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
href
tidak dihapus, mungkin pengguna dapat mengunjungi halaman itu secara manual.Kosongkan tautannya
Hapus
href
atributnya. Dengan kode ini Anda tidak menambahkan pengendali acara tetapi Anda mengubah tautannya sendiri. Gunakan kode ini untuk menonaktifkan tautan:Dan ini untuk mengaktifkannya kembali:
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
onclick
fungsi tempat Andareturn false
, tautan tidak akan diikuti. Untuk menonaktifkan tautan:Untuk mengaktifkannya kembali:
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
disabled
atribut sehingga Anda dapat menggunakan aturan CSS berikut:Jika Anda menggunakan kelas alih-alih atribut:
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
disabled
atribut maupun dengan.disabled
kelas. Sebaliknya, jika Anda menghapus tautan (atau menggunakan salah satu teknik JavaScript lainnya), Anda juga harus menangani gaya karena<a>
tanpanyahref
masih dicat sebagaimana diaktifkan.Aplikasi Internet Kaya yang Dapat Diakses (ARIA)
Jangan lupa juga menyertakan atribut
aria-disabled="true"
bersamaan dengandisabled
atribut / kelas.sumber
td a
yang mungkin dinonaktifkan, yang akan memanggilevent.preventDefault()
jika$(this).data('disabled')
benar, dan kemudian mengaturdata('disabled', true)
ke tautan apa pun yang ingin saya nonaktifkan (salah untuk mengaktifkan, dll.)$(this).is('[disabled]')
mungkin cara yang lebih baik untuk mendeteksi atribut yang dinonaktifkanMendapat perbaikan di css.
Di atas css bila diterapkan pada tag jangkar akan menonaktifkan acara klik.
Untuk perincian, periksa tautan ini
sumber
Terima kasih kepada semua orang yang memposting solusi (terutama @AdrianoRepetti), saya menggabungkan beberapa pendekatan untuk menyediakan beberapa
disabled
fungsionalitas 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:
Bagaimana caranya
Sertakan css ini, karena ini adalah garis pertahanan pertama. Ini mengasumsikan pemilih yang Anda gunakan adalah
a.disabled
Selanjutnya, instantiate kelas ini pada siap (dengan pemilih opsional):
Kelas ES2015
npm install -S key.js
Kelas naskah:
sumber
Coba elemen:
Menonaktifkan tautan berfungsi untuk saya di Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/ .
Firefox sepertinya tidak bermain bagus. Contoh ini berfungsi:
Catatan: menambahkan pernyataan 'langsung' untuk tautan yang dinonaktifkan / diaktifkan di masa mendatang.
Note2: mengubah 'live' menjadi 'on'.
sumber
Bootstrap 4.1 menyediakan nama kelas
disabled
danaria-disabled="true"
atribut.contoh"
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 ancor
daripada di skrip JS Anda memerlukan sesuatu seperti ituTapi hati-hati
Solusinya hanya berfungsi pada tautan dengan kelas
btn btn-link
.Terkadang bootstrap merekomendasikan penggunaan
card-link
kelas, dalam hal ini solusi tidak akan berfungsi .sumber
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:
Javascript (siap dalam jQuery):
sumber
Anda tidak dapat menonaktifkan tautan, jika Anda ingin acara klik itu tidak boleh diaktifkan, cukup
Remove
tautanaction
dari itu.Untuk Info Lebih Lanjut: - Elemen yang dapat Dinonaktifkan
sumber
Saya akan melakukan sesuatu seperti
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.
sumber
Untuk menonaktifkan tautan untuk mengakses halaman lain di perangkat sentuh:
sumber
setAttribute('href', '');
dan url halaman adalahhttp://example.com/page/?query=something
tautan ketika mengklik IE11 akan pergi kehttp://example.com/page/
. Solusi yang bisa digunakan adalahsetAttribute('href', '#');
Di Razor (.cshtml) Anda dapat melakukan:
sumber
Anda dapat menggunakan ini untuk menonaktifkan Hyperlink dari asp.net atau tombol tautan di html.
sumber
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):
dan dalam html
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,
sumber
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!sumber
$("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');