JQuery kullanarak bir bağlantı nasıl etkinleştirilir veya devre dışı bırakılır?

JQuery kullanarak bir bağlantı nasıl etkinleştirilir veya devre dışı bırakılır?

Bir çapanın belirtilenleri izlemesini önlemek için şunları hrefkullanmanızı öneririm 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();
    });
});

Görmek:

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

Ayrıca SO ile ilgili bu önceki soruya bakın:

jQuery bir bağlantıyı devre dışı bırak

Şu anda üzerinde çalıştığım uygulama javascript ile birlikte bir CSS stili ile yapıyor.

a.disabled { color:gray; }

Sonra bir bağlantıyı devre dışı bırakmak istediğimde

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

Sonra, bir etiketi 'thelink' için tıklama işleyicisinde her zaman ilk önce bir kontrol çalıştırırım

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

Burada daha çok sevdiğim bir cevap buldum

Buna benzer:

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

Etkinleştirme, href özelliğinin ayarlanmasını içerir

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

Bu, bağlantı elemanının normal metin haline geldiği görünümünü verir veya tam tersi.

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

}); 

Bence daha güzel bir çözüm devre dışı veri özniteliğini ayarlamak ve tıklama için bir kontrol demirlemektir. Bu şekilde, örneğin javascript ajax çağrısı veya bazı hesaplamalar bitene kadar bir çapayı geçici olarak devre dışı bırakabiliriz. Devre dışı bırakmazsak, birkaç kez hızlı bir şekilde tıklayabiliriz, bu istenmeyen bir durumdur ...

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

Bir jsfiddle örneği yaptım: http://jsfiddle.net/wgZ59/76/

Seçilen Yanıt iyi değil.

İşaretçi olayları CSS stilini kullanın . (Rashad Annara'nın önerdiği gibi)

Bkz. MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events . Çoğu tarayıcıda desteklenir.

Çapa basit "özürlü" özniteliği eklemek, aşağıdaki gibi genel CSS kuralınız varsa işi yapar:

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

Aşağıdaki satırları deneyin

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

Çünkü, <a>etiketi devre dışı bıraksanız bile hrefkaldırmanız gerekir href.

Etkinleştirmek istediğinizde aşağıdaki satırları deneyin

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

Dönüş yanlış kadar basit;

ex.

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

veya

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

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

Css dosyasında

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

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

Bu yöntem çağrılırsa, etkinliğin varsayılan eylemi tetiklenmez.

Sayfa ile tüm etkileşimi engellemeye çalışıyorsanız jQuery BlockUI Eklentisine bakmak isteyebilirsiniz

Bunların nasıl devre dışı bırakılmasını istediğinizi veya devre dışı bırakılmasına neyin sebep olacağını asla belirtmediniz.

İlk olarak, JQuery'nin Öznitelik İşlevlerini kullanacağınız ve bu işlevin bir tıklama veya belgenin yüklenmesi gibi bir olayda gerçekleşmesini sağlamak için değeri devre dışı olarak nasıl ayarlayacağınızı bulmak istersiniz .

Bir bağlantı etiketine metin veya html içeriği koymanız gereken, ancak o öğe tıklandığında hiçbir işlem yapılmasını istemediğiniz durumlar için (bir sayfa bağlantısının devre dışı bırakılmasını istediğinizde olduğu gibi) geçerli sayfa), href'i kesin. ;)

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

@ Michael-meadows tarafından cevap beni bu uçlu, ama onun hala hala jQuery / JS ile çalışmak zorunda olduğu senaryoları ele oldu. Bu durumda, html'nin kendisini yazma üzerinde kontrolünüz varsa , yapmanız gereken tek şey href etiketini x-ing yapmaktır, bu yüzden çözüm saf bir HTML'dir!

Href'i tutan jQuery finagling içermeyen diğer çözümler, href'ye bir # koymanızı gerektirir, ancak bu sayfanın yukarı çıkmasına neden olur ve sadece düz eski devre dışı olmasını istersiniz. Veya boş bırakın, ancak tarayıcıya bağlı olarak, yine de üste atlamak gibi şeyler yapar ve IDE'lere göre geçersiz HTML'dir. Ancak görünüşe göre bir aetiket HREF içermeyen tamamen geçerli bir HTML'dir.

Son olarak, şöyle diyebilirsiniz: Tamam, neden sadece bir etiketi bir daha dökmüyorsunuz? Çoğu zaman yapamayacağınız için aetiket, Bootstrap'ın sayfalandırıcısı gibi kullandığınız CSS çerçevesinde veya kontrolünde stil oluşturma amacıyla kullanılır:

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

Bu yüzden yukarıdaki yanıtların bir kombinasyonu ile, ben bunu buldum.

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

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

Eğer bir çapa etiketi gibi davranmaya ihtiyacınız yoksa, o zaman hiç değiştirmeyi tercih ederim. Örneğin, sabitleme etiketiniz

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

daha sonra jquery kullanarak bağlantı yerine metin görüntülemeniz gerektiğinde bunu yapabilirsiniz.

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

Bu şekilde, sabitleme etiketini bir div etiketiyle değiştirebiliriz. Bu çok daha kolay (sadece 2 satır) ve anlamsal olarak da doğru (çünkü artık bir bağlantıya ihtiyacımız yok, bu nedenle bir bağlantıya sahip olmamalıdır)

Devre dışı bırakılmış özelliğe sahip herhangi bir öğeyi Devre Dışı Bırak veya Etkinleştir.

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

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