Bagaimana cara mengaktifkan atau menonaktifkan jangkar menggunakan jQuery?

Bagaimana cara mengaktifkan atau menonaktifkan jangkar menggunakan jQuery?

Agar jangkar tidak mengikuti yang ditentukan href, saya sarankan menggunakan preventDefault():

// jQuery 1.7+
$(function () {
    $('a.something').on("click", function (e) {
        e.preventDefault();
    });
});

// jQuery < 1.7
$(function () {
    $('a.something').click(function (e) {
        e.preventDefault();
    });

    // or 

    $('a.something').bind("click", function (e) {
        e.preventDefault();
    });
});

Lihat:

http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29

Lihat juga pertanyaan sebelumnya di SO:

jQuery menonaktifkan tautan

Aplikasi yang sedang saya kerjakan melakukannya dengan gaya CSS dikombinasikan dengan javascript.

a.disabled { color:gray; }

Lalu setiap kali saya ingin menonaktifkan tautan, saya menelepon

$('thelink').addClass('disabled');

Kemudian, di handler klik untuk tag 'thelink' saya selalu menjalankan pemeriksaan hal pertama

if ($('thelink').hasClass('disabled')) return;

Saya menemukan jawaban yang saya sukai jauh lebih baik di sini

Terlihat seperti ini:

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeTo("fast", .5).removeAttr("href"); 
    });
});

Mengaktifkan akan melibatkan pengaturan atribut href

$(document).ready(function(){
    $("a").click(function () { 
        $(this).fadeIn("fast").attr("href", "http://whatever.com/wherever.html"); 
    });
});

Ini memberi Anda tampilan bahwa elemen jangkar menjadi teks normal, dan sebaliknya.

$("a").click(function(){
                alert('disabled');
                return false;

}); 

Saya pikir solusi yang lebih baik adalah dengan mengatur atribut data yang dinonaktifkan pada dan jangkar cek untuk itu di klik. Dengan cara ini kita dapat menonaktifkan jangkar sementara hingga mis. Javascript selesai dengan panggilan ajax atau beberapa perhitungan. Jika kita tidak menonaktifkannya, maka kita dapat dengan cepat mengkliknya beberapa kali, yang tidak diinginkan ...

$('a').live('click', function () {
    var anchor = $(this);

    if (anchor.data("disabled")) {
        return false;
    }

    anchor.data("disabled", "disabled");

    $.ajax({
        url: url,
        data: data,
        cache: false,
        success: function (json) {
            // when it's done, we enable the anchor again
            anchor.removeData("disabled");
        },
        error: function () {
             // there was an error, enable the anchor
            anchor.removeData("disabled");
        }
    });

    return false;
});

Saya membuat contoh jsfiddle: http://jsfiddle.net/wgZ59/76/

Jawaban yang dipilih tidak baik.

Gunakan gaya CSS pointer-events . (Seperti yang disarankan Rashad Annara)

Lihat MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Ini didukung di sebagian besar browser.

Menambahkan sederhana "dinonaktifkan" ke jangkar akan melakukan pekerjaan jika Anda memiliki aturan CSS global seperti berikut:

a[disabled], a[disabled]:hover {
   pointer-events: none;
   color: #e1e1e1;
}

Coba garis di bawah ini

$("#yourbuttonid").attr("disabled", "disabled");
$("#yourbuttonid").removeAttr("href");

Coz, Bahkan jika Anda menonaktifkan <a>tag hrefakan bekerja, Anda harus menghapus hrefjuga.

Bila Anda ingin mengaktifkan, coba di bawah garis

$("#yourbuttonid").removeAttr("disabled");
$("#yourbuttonid").attr("href", "#nav-panel");

Ini sesederhana return false;

ex.

jQuery("li a:eq(0)").click(function(){
   return false;
})

atau

jQuery("#menu a").click(function(){
   return false;
})

$('#divID').addClass('disabledAnchor');

Dalam file css

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

$("a").click(function(event) {
  event.preventDefault();
});

Jika metode ini dipanggil, tindakan default acara tidak akan dipicu.

Jika Anda mencoba untuk memblokir semua interaksi dengan halaman Anda mungkin ingin melihat Plugin jQuery BlockUI

Anda tidak pernah benar-benar menentukan bagaimana Anda ingin mereka dinonaktifkan, atau apa yang menyebabkan penonaktifan.

Pertama, Anda ingin mengetahui cara menetapkan nilai ke dinonaktifkan, untuk itu Anda akan menggunakan Fungsi Atribut JQuery , dan memiliki fungsi yang terjadi pada suatu peristiwa , seperti klik , atau pemuatan dokumen.

Untuk situasi di mana Anda harus meletakkan konten teks atau html di dalam tag jangkar, tetapi Anda tidak ingin tindakan apa pun diambil ketika elemen itu diklik (seperti ketika Anda ingin tautan paginator berada dalam keadaan dinonaktifkan karena itu halaman saat ini), cukup href. ;)

<a>3 (current page, I'm totally disabled!)</a>

Jawaban oleh @ michael-meadows memberi saya tip untuk ini, tapi itu masih menangani skenario di mana Anda masih harus / bekerja dengan jQuery / JS. Dalam hal ini, jika Anda memiliki kendali atas penulisan html itu sendiri, cukup x-ing tag href yang perlu Anda lakukan, jadi solusinya adalah HTML murni!

Solusi lain tanpa jQuery finagling yang menjaga href mengharuskan Anda untuk meletakkan # di href, tetapi itu menyebabkan halaman memantul ke atas, dan Anda hanya ingin itu sudah lama dinonaktifkan. Atau membiarkannya kosong, tetapi tergantung pada peramban, itu masih melakukan hal-hal seperti melompat ke atas, dan, itu adalah HTML yang tidak valid menurut IDE. Namun ternyata sebuah atag adalah HTML yang benar-benar valid tanpa HREF.

Terakhir, Anda mungkin berkata: Oke, mengapa tidak membuang a tag sama sekali? Karena sering kali Anda tidak dapat melakukannya, atag digunakan untuk keperluan penataan dalam kerangka CSS atau kontrol yang Anda gunakan, seperti paginator Bootstrap:

http://twitter.github.io/bootstrap/components.html#pagination

Jadi dengan kombinasi tanggapan di atas, saya datang dengan ini.

a.disabled { color: #555555; cursor: default; text-decoration: none; }

$(".yourClass").addClass("disabled").click(function(e){ e.preventDefault(); 

Jika Anda tidak perlu berperilaku sebagai tag jangkar maka saya lebih suka untuk menggantinya sama sekali. Misalnya jika tag anchor Anda seperti

<a class="MyLink" href="http://www.google.com"><span>My</span> <strong>Link</strong></a>

kemudian menggunakan jquery Anda dapat melakukan ini ketika Anda perlu menampilkan teks, bukan tautan.

var content = $(".MyLink").text(); // or .html()
$(".MyLink").replaceWith("<div>" + content + "</div>")

Jadi dengan cara ini, kita cukup mengganti tag jangkar dengan tag div. Ini jauh lebih mudah (hanya 2 baris) dan semantik benar juga (karena kita tidak memerlukan tautan sekarang karena itu seharusnya tidak memiliki tautan)

Nonaktifkan atau Aktifkan elemen apa pun dengan properti yang dinonaktifkan.

// Disable 
$("#myAnchor").prop( "disabled", true );

// Enable
$( "#myAnchor" ).prop( "disabled", false );