jQuery menonaktifkan tautan

284

Adakah yang tahu cara menonaktifkan tautan di jquery TANPA menggunakan return false;?

Secara khusus, apa yang saya coba lakukan adalah menonaktifkan tautan suatu item, melakukan klik padanya menggunakan jquery yang memicu beberapa hal, kemudian mengaktifkan kembali tautan itu sehingga jika diklik lagi itu berfungsi sebagai default.

Terima kasih. Dave

PEMBARUAN Berikut kodenya. Yang perlu dilakukan setelah .expandedkelas diterapkan adalah mengaktifkan kembali tautan yang dinonaktifkan.

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});
davebowker
sumber
7
Mengapa persyaratan untuk tidak menggunakan return false? Gunakan itu, lalu hapus event handler ketika itu tidak lagi berlaku (atau beri syarat untuk mengembalikan nilai yang berbeda tergantung pada status "barang" yang disebutkan).
Quentin
Apakah Anda hanya mencoba melakukan pra-pemrosesan sebelum tautan diikuti pada tindakan klik yang sama? yaitu Anda tidak mengusulkan dua klik melainkan tautan klik pengguna, beberapa tindakan terjadi, tautan diikuti?
Lazarus
Jika tidak, dapatkah Anda menjelaskan mengapa Anda mengambil pendekatan ini karena pemahaman yang lebih baik tentang ruang masalah akan meningkatkan jawaban.
Lazarus
@ lazarus, saya usulkan 2 klik pada tautan yang sama. 1 untuk melakukan beberapa hal terlebih dahulu, lalu ke-2 untuk memperlakukan tautan sebagai tautan.
davebowker
@daviddorward, Sejauh ini saya sudah mencoba mengembalikan false dan melanjutkan sampai ke bagian kedua dari tujuan saya, yaitu tidak mengizinkan klik ke-2 untuk melewati. Jika Anda bisa menulis contoh singkat saya akan sangat berterima kasih.
davebowker

Jawaban:

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

Itu akan mencegah perilaku default hyperlink, yaitu mengunjungi href yang ditentukan.

Dari tutorial jQuery :

Untuk klik dan sebagian besar acara lainnya, Anda dapat mencegah perilaku default - di sini, mengikuti tautan ke jquery.com - dengan memanggil event.preventDefault () di pengendali event

Jika Anda ingin preventDefault()hanya jika kondisi tertentu terpenuhi (sesuatu disembunyikan misalnya), Anda dapat menguji visibilitas ul Anda dengan kelas diperluas . Jika terlihat (mis. Tidak disembunyikan) tautan harus menyala seperti biasa, karena pernyataan if tidak akan dimasukkan, dan dengan demikian perilaku default tidak akan dicegah:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});
karim79
sumber
3
Dengan jQuery 1.7+, Anda dapat menggunakan / mematikan: stackoverflow.com/questions/209029/...
Lance Cleveland
jika memiliki href dan onclick, ini akan berfungsi $ ("# myLink"). attr ('onclick', '') .click (fungsi (e) {e.preventDefault ();});
Ronald McDonald
direalisasikan melalui ajax dan jquery saya dapat menyembunyikan membeli href memiliki callback untuk menjaga pencakar dari mendapatkan tautan ini. Keren terima kasih!
Cesar Bielich
posting ini memiliki cara termudah menggunakan bootstrap , semoga membantu.
shaijut
107

Coba ini:

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

EDIT-

Dari kode Anda yang diperbarui:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);
TStamper
sumber
3
Bermain dengan href sangat bagus karena merupakan cara cepat untuk melumpuhkan tautan yang melakukan aksi melalui acara onclick. Sangat pintar sekali!
daitangio
metode manis untuk menjaga browser dari menambahkan # dalam URI saat melakukanhref="#"
Abela
65

Untuk yang lain yang datang ke sini via google seperti saya - berikut ini pendekatan lain:

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

Ingat: bukan hanya ini kelas css

class = "buttonstyle"

tetapi juga dua ini

class = "buttonstyle dinonaktifkan"

sehingga Anda dapat dengan mudah menambah dan menghapus kelas lebih lanjut dengan jQuery. Tidak perlu menyentuh href ...

Saya suka jQuery! ;-)

Hein
sumber
2
ini mengasumsikan bahwa tautan tidak memiliki target :)
dstarh
2
Alih-alih melakukan semua kemewahan ini, mengapa tidak hanya menempel onclick yang lebih tinggi di dom, gunakan on()untuk menyaring semua a.disabledtautan dan mencegah default. Maka yang harus Anda lakukan adalah mengaktifkan / menonaktifkan kelas yang dinonaktifkan dan tautannya akan menangani dirinya sendiri ketika "diaktifkan".
CodeChimp
Tidak perlu untuk "== true" - addClass ('dinonaktifkan') akan berjalan. if(disabledCondition)
Fox Wilson
1
@fwilson, sementara Anda benar-benar benar, untuk programmer pemula, lebih mudah dipahami dengan == true. :)
carmenism
Adakah alasan khusus untuk tidak menyederhanakannya if ($(this).hasClass('disabled')) { e.preventDefault(); }?
Mir
58

Berikut ini adalah solusi css / jQuery alternatif yang saya sukai untuk keseness dan skrip yang diperkecil:

css:

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

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});
Peter DeWeese
sumber
7
Dari Mozilla : "Peringatan: Penggunaan peristiwa-pointer di CSS untuk elemen non-SVG adalah eksperimental. Fitur yang digunakan untuk menjadi bagian dari spesifikasi rancangan UI CSS3 tetapi, karena banyak masalah terbuka, telah ditunda ke CSS4."
spidol duelin
1
Itu pertimbangan yang bagus, tetapi itu bekerja dengan baik di sebagian besar browser modern.
Peter DeWeese
Anda mungkin ingin mempertimbangkan chaining .prop("tabindex", "-1");setelahaddClass
Oleg Grishko
19

Anda dapat menghapus klik untuk tautan dengan mengikuti;

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

Anda dapat mengaktifkan kembali tautan dengan mengikuti,

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

Anda tidak dapat menggunakan properti 'dinonaktifkan' untuk tautan.

Kailas Mane
sumber
1
Mudah dinyalakan dan dimatikan dibandingkan dengan yang lain.
python1981
2
"Anda tidak dapat menggunakan properti 'dinonaktifkan' untuk tautan." Bertanya-tanya mengapa tidak ada konsistensi antara tombol, dan tautan untuk menonaktifkan. "Dinonaktifkan" juga berfungsi untuk tautan. Ini seperti mengatakan untuk mobil Chevy Anda harus menekan pedal rem untuk berhenti, tetapi untuk pabrikan mobil lain ini, Anda harus menggunakan tuas yang terletak di atap.
eaglei22
14

Jika Anda memilih rute href, Anda dapat menyimpannya

Untuk menonaktifkan:

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

Kemudian aktifkan kembali menggunakan:

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

Dalam satu kasus saya harus melakukannya dengan cara ini karena peristiwa klik sudah terikat di tempat lain dan saya tidak punya kendali atasnya.

jBelanger
sumber
12

Saya selalu menggunakan ini di jQuery untuk menonaktifkan tautan

$("form a").attr("disabled", "disabled");
matox
sumber
Anda juga dapat menggunakannya $("form a").attr("disabled", false);untuk mengaktifkannya kembali
Alexander Ryhlitsky
9

contoh tautan 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>

gunakan ini di jQuery

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

tambahkan ini ke css:

    a[disabled="disabled"] {
        pointer-events: none;
    }
Ch'nycos
sumber
1
Saya belum pernah menemukan properti CSS ini sebelumnya tetapi ini, bagi saya, sejauh ini merupakan metode paling sederhana untuk menonaktifkan hyperlink. Keindahannya adalah ketika Anda menghapus kelas yang berisi pointer-events: noneproperti dari elemen jangkar mereka kembali melakukan apa pun yang mereka lakukan sebelumnya ketika diklik. Jadi jika mereka hyperlink dasar, mereka kembali ke menavigasi ke URL di hrefatribut mereka , dan jika mereka memiliki set event handler klik, itu menjadi aktif kembali. Jauh lebih sederhana daripada menyimpan hrefnilai dan penangan klik.
Philip Stratford
Saya suka solusi ini, ini adalah yang paling sederhana.
louis
Dari beberapa "solusi" ketika tidak ada yang berhasil (dan hampir menyerah rute ini), datang ke permata ini . Ini solusi yang tidak perlu repot. Dan satu-satunya yang BENAR-BENAR BEKERJA. Pujian.
user12379095
5

My fav in "checkout untuk mengedit item dan mencegah -wild liar klik ke mana saja- saat dalam checkout" fungsi

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

Jadi, jika saya ingin semua tautan eksternal di toolbar tindakan kedua harus dinonaktifkan saat dalam "mode edit" seperti dijelaskan di atas, saya akan menambahkan fungsi edit

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

Tautan contoh setelah kebakaran:

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

Dan sekarang Anda BISA menggunakan properti yang dinonaktifkan untuk tautan

Bersulang!

Lahmizzar
sumber
3

Anda harus menemukan jawabannya di sini .

Terima kasih @Will dan @Matt untuk solusi elegan ini.

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

Anda bisa menyembunyikan dan menampilkan tautan sesuka Anda

$(link).hide();
$(link).show();
David Fawzy
sumber
2

Hanya memicu barang, mengatur beberapa bendera, mengembalikan false. Jika flag diatur - jangan lakukan apa-apa.

Michał Chaniewski
sumber
Telah mencobanya dengan menetapkan kelas, lalu memanggil kelas itu nanti tetapi mengembalikan false membawa, dan mencegah tautan dipanggil.
davebowker
1

unbind()sudah tidak digunakan lagi jQuery 3, gunakan off()metode ini:

$("a").off("click");
shintaroid
sumber
0

Saya tahu ini bukan dengan jQuery tetapi Anda dapat menonaktifkan tautan dengan beberapa css sederhana:

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

HTML akan terlihat seperti

<a disabled="disabled" href="/start">Take Survey</a>
Cruz Nunez
sumber
0

Ini berfungsi untuk tautan yang memiliki atribut onclick yang ditetapkan inline. Ini juga memungkinkan Anda untuk menghapus "return false" di kemudian hari untuk mengaktifkannya.

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

Gunakan saja $("a").prop("disabled", true);. Ini benar-benar akan menonaktifkan elemen tautan. Perlu demikian prop("disabled", true). Jangan gunakanattr("disabled", true)

André Amaral
sumber