İçinde <td>devre dışı bırakmam gereken bir bağlantı düğmesi var. Bu IE üzerinde çalışıyor ancak Firefox ve Chrome'da çalışmıyor. Yapı - İçindeki bağlantı a <td>. İçine herhangi bir kap ekleyemiyorum<td>(Div / span gibi) içine

Aşağıdakilerin hepsini denedim ancak Firefox'ta çalışmıyor (1.4.2 js kullanarak):

$(td).children().each(function () {
        $(this).attr('disabled', 'disabled');
  });


  $(td).children().attr('disabled', 'disabled');

  $(td).children().attr('disabled', true);

  $(td).children().attr('disabled', 'true');

Not - Bağlantı etiketi için dinamik olarak kaydedildiği için tıklama işlevinin kaydını kaldıramıyorum. BAĞLANTI MODUNDA BAĞLANTIYI GÖSTERMELİDİR.

Bir bağlantıyı devre dışı bırakamazsınız (taşınabilir bir şekilde). Bu tekniklerden birini kullanabilirsiniz (her birinin kendi yararları ve dezavantajları vardır).

CSS yolu

Bu olmalı doğru yolu (ama daha sonra bakınız) tarayıcıların çoğu bunu destekleyecek ne zaman bunu yapmak için:

a.disabled {
    pointer-events: none;
}

Örneğin, Bootstrap 3.x bunu yapar. Şu anda (2016) yalnızca Chrome, FireFox ve Opera (19+) tarafından iyi desteklenmektedir. Internet Explorer 11 sürümünü desteklemeye başladı ancak bağlantılar için değil, ancak aşağıdaki gibi bir dış öğede kullanılabilir:

span.disable-links {
    pointer-events: none;
}

İle:

<span class="disable-links"><a href="#">...</a></span>

Geçici çözüm

Biz, muhtemelen, gerek CSS için sınıfını tanımlamak için pointer-events: nonebiz ama eğer ne yenidendisabled yerine CSS sınıfının niteliğini? Kesin olarak konuşmak disablediçin desteklenmez, <a>ancak tarayıcılar bilinmeyen özelliklerden şikayet etmez . disabledIE özniteliğini kullanmak yok sayar, pointer-eventsancak IE'ye özgü disabledözniteliği onurlandırır ; CSS uyumlu diğer tarayıcılar, bilinmeyen disabled özellikleri ve onurları yok sayar pointer-events. Yazmak açıklamaktan daha kolay:

a[disabled] {
    pointer-events: none;
}

IE 11 için başka bir seçenek display, blockveya için bağlantı öğeleri kümesidir inline-block:

<a style="pointer-events: none; display: inline-block;" href="#">...</a>

Bunun bir IE'yi desteklemeniz gerekiyorsa (ve HTML'nizi değiştirebilirsiniz) bunun taşınabilir bir çözüm ...

Bütün bunlar pointer-eventssadece işaretçi olaylarını devre dışı bıraktığını lütfen unutmayın . Bağlantılar yine de klavyede gezilebilir, o zaman burada açıklanan diğer tekniklerden birini de uygulamanız gerekir.

odak

Yukarıda açıklanan CSS tekniği ile bağlantılı olarak, tabindexbir elemanın odaklanmasını önlemek için standart olmayan bir şekilde kullanabilirsiniz:

<a href="#" disabled tabindex="-1">...</a>

Birçok tarayıcıyla uyumluluğunu hiç kontrol etmedim, o zaman bunu kullanmadan önce kendiniz test etmek isteyebilirsiniz. JavaScript olmadan çalışma avantajı vardır. Maalesef (ama açıkçası) tabindexCSS'den değiştirilemez.

Durdurma tıklama sayısı

hrefA JavaScript işlevini kullanın , koşulu (veya devre dışı bırakılmış özniteliğin kendisini) denetleyin ve hiçbir şey yapmayın.

$("td > a").on("click", function(event){
    if ($(this).is("[disabled]")) {
        event.preventDefault();
    }
});

Bağlantıları devre dışı bırakmak için şunu yapın:

$("td > a").attr("disabled", "disabled");

Bunları yeniden etkinleştirmek için:

$("td > a").removeAttr("disabled");

İsterseniz .is("[disabled]")kullanmak kullanabilirsiniz .attr("disabled") != undefined(jQuery 1.6+ her zaman undefinedöznitelik ayarlanmadığında geri döner ) ama is()çok daha açıktır (bu ipucu için Dave Stewart sayesinde). Lütfen bu disabledözelliği standart olmayan bir şekilde kullandığımı unutmayın , eğer bunu önemsiyorsanız özniteliği bir sınıfla değiştirin ve değiştirin.is("[disabled]") ile .hasClass("disabled")(ekleme ve birlikte kaldırarak addClass()veremoveClass() ).

Zoltán Tamási yorumunda belirtildiği o olay işleyicisi sipariş bazı sorunları neden olabilir Bu durumda (örneğin knockoutjs kullanmak için) gerçek 'fonksiyonu "bazı durumlarda tıklama etkinlik zaten bazı bağlıdır'. Dolayısıyla ben bir dönüş bağlanarak engelli bağlantıları uygulamaya bağlantının yanlış işleyicisi touchstart,mousedown ve keydownolaylar. Bu bazı dezavantajları (o dokunuş önleyecektir linke başladı kaydırmak)" vardır ama klavye olaylarını ele de klavye navigasyon önlemek için yararı vardır.

Unutmayın ki href temizlenmez kullanıcı o sayfayı ziyaret etmek için bu mümkün.

Bağlantıyı temizle

hrefÖzelliği temizleyin . Bu kodla bir olay işleyicisi eklemezsiniz, ancak bağlantının kendisini değiştirirsiniz. Bağlantıları devre dışı bırakmak için bu kodu kullanın:

$("td > a").each(function() {
    this.data("href", this.attr("href"))
        .attr("href", "javascript:void(0)")
        .attr("disabled", "disabled");
});

Ve bu onları yeniden etkinleştirmek için:

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

Şahsen ben bu çözümü çok sevmiyorum (devre dışı bağlantılar ile daha fazlasını yapmak zorunda değilseniz) ama bir bağlantıyı takip etmenin çeşitli yolu nedeniyle daha uyumlu olabilir .

Sahte tıklama işleyici

Bağlantınızın takip edilmeyeceği bir onclickişlev ekleyin / kaldırın return false. Bağlantıları devre dışı bırakmak için:

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Bunları yeniden etkinleştirmek için:

$("td > a").removeAttr("disabled").off("click");

Birincisi yerine bu çözümü tercih etmek için bir neden olduğunu düşünmüyorum.

Şekillendirme

Stil oluşturma daha da basittir, bağlantıyı devre dışı bırakmak için hangi çözümü kullanırsanız disabledkullanın, aşağıdaki CSS kuralını kullanabilmeniz için bir özellik ekledik:

a[disabled] {
    color: gray;
}

Özellik yerine bir sınıf kullanıyorsanız:

a.disabled {
    color: gray;
}

Bir kullanıcı arayüzü çerçevesi kullanıyorsanız, devre dışı bırakılmış bağlantıların düzgün bir şekilde biçimlendirilmediğini görebilirsiniz . Önyükleme 3.x, örneğin, bu senaryoyu işler ve düğme hem disabledniteliğe hem de .disabledsınıfa doğru şekilde stilize edilir . Bunun yerine, bağlantıyı temizliyorsanız (veya diğer JavaScript tekniklerinden birini kullanıyorsanız), stilin işlenmesi gerekir, çünkü bir <a>olmadan hrefhala etkin olarak boyanır.

Erişilebilir Zengin İnternet Uygulamaları (ARIA)

Öznitelik / sınıfla aria-disabled="true"birlikte bir öznitelik eklemeyi de unutmayın disabled.

Düzeltme css var.

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

Bağlantı etiketine uygulandığında css'nin üstünde click olayı devre dışı bırakılır.

Ayrıntılar için bu bağlantıyı kontrol edin

Çözüm gönderen herkes (özellikle @AdrianoRepetti) sayesinde, daha gelişmiş disabledişlevsellik sağlamak için çoklu yaklaşımları birleştirdim (ve çapraz tarayıcıda çalışır). Kod aşağıdadır (hem ES2015 hem de tercihinize göre kahve).

Bu, çoklu savunma seviyeleri sağlar, böylece devre dışı olarak işaretlenen Çapalar gerçekten böyle davranır. Bu yaklaşımı kullanarak yapamayacağınız bir çapa elde edersiniz:

• Tıklayın
• sekme ve geri dönüş tuşuna basın
• ona sekme yapmak odağı bir sonraki odaklanabilir öğeye taşır
• çapanın daha sonra etkinleştirilip etkinleştirilmediğinin farkındadır

Nasıl

1. İlk savunma hattı olduğu için bu css'i ekleyin. Bu, kullandığınız seçicinina.disabled

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

2. Ardından, bu sınıfı hazırda (isteğe bağlı seçiciyle) başlatın:

     new AnchorDisabler()

ES2015 Sınıfı

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
  }
}

Coffescript sınıfı:

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

Öğeyi deneyin:

$(td).find('a').attr('disabled', 'disabled');

Bir bağlantıyı devre dışı bırakmak Chrome'da benim için çalışıyor: http://jsfiddle.net/KeesCBakker/LGYpz/ .

Firefox hoş görünmüyor. Bu örnek işe yarar:

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

Not: gelecekteki devre dışı / etkin bağlantılar için bir 'canlı' deyimi eklendi.
Not2: 'canlı'yı' açık 'olarak değiştirdi.

Bootstrap 4.1 adlı bir sınıf disabledve aria-disabled="true"öznitelik sağlar.

misal"

<a href="#" 
        class="btn btn-primary btn-lg disabled" 
        tabindex="-1" 
        role="button" aria-disabled="true"
>
    Primary link
</a>

Daha fazlası getbootstrap.com'da

Dinamik olarak yapmak istiyorsanız ve you don't want to care if it is button or ancorJS komut dosyasındakinden böyle bir şeye ihtiyacınız var

   let $btn=$('.myClass');
   $btn.attr('disabled', true);
   if ($btn[0].tagName == 'A'){
        $btn.off();
        $btn.addClass('disabled');
        $btn.attr('aria-disabled', true);
   }

Ama dikkatli ol

Çözüm yalnızca sınıflarla olan bağlantılarda çalışır btn btn-link.

Bazen bootstrap card-linksınıf kullanılmasını önerir , bu durumda çözüm çalışmaz .

Bir öznitelik <a href="..." disabled="disabled">veya bir sınıfla çalışabilecek aşağıdaki çözümü buldum<a href="..." class="disabled"> :

CSS Stilleri:

a[disabled=disabled], a.disabled {
    color: gray;
    cursor: default;
}

a[disabled=disabled]:hover, a.disabled:hover {
    text-decoration: none;
}

Javascript (jQuery'de hazır):

$("a[disabled], a.disabled").on("click", function(e){

    var $this = $(this);
    if ($this.is("[disabled=disabled]") || $this.hasClass("disabled"))
        e.preventDefault();
})

bir bağlantıyı devre dışı bırakamazsınız, o tıklama olayının Removebaşlatılmamasını istiyorsanız actiono bağlantıdan sadece .

$(td).find('a').attr('href', '');

Daha Fazla Bilgi İçin: - Devre Dışı Bırakılabilecek Öğeler

Gibi bir şey yapardım

$('td').find('a').each(function(){
 $(this).addClass('disabled-link');
});

$('.disabled-link').on('click', false);

böyle bir şey işe yaramalı. Devre dışı bırakmak istediğiniz bağlantılar için bir sınıf eklersiniz ve sonra birisi tıklattığında false değerini döndürürsünüz. Bunları etkinleştirmek için sınıfı kaldırmanız yeterlidir.

Dokunmatik cihazdaki başka bir sayfaya erişim bağlantısını devre dışı bırakmak için:

if (control == false)
  document.getElementById('id_link').setAttribute('href', '#');
else
  document.getElementById('id_link').setAttribute('href', 'page/link.html');
end if;

Razor'da (.cshtml) şunları yapabilirsiniz:

@{
    var isDisabled = true;
}

<a href="@(isDisabled ? "#" : @Url.Action("Index", "Home"))" @(isDisabled ? "disabled=disabled" : "") class="btn btn-default btn-lg btn-block">Home</a>

Asp.net köprüsünü veya html'deki bağlantı düğmelerini devre dışı bırakmak için bunu kullanabilirsiniz.

$("td > a").attr("disabled", "disabled").on("click", function() {
    return false; 
});

Başka bir olası yol var ve en çok sevdiğim yol. Temel olarak, ışık kutusunun bir div yerleştirerek ve z-endeksi ile uğraşarak tüm sayfayı devre dışı bırakmasıyla aynıdır. İşte benim bir projemden ilgili parçacıklar. Bu tüm tarayıcılarda çalışır !!!!!

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
    });
});

ve html biçiminde

<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"/>

Böylece yeniden boyutlandırma, tutturucunun (görüntüler sadece oklardır) konumlarını bulur ve devre dışı bırakıcıyı üstüne yerleştirir. Devre dışı bırakıcının resmi, devre dışı olduğunu göstermek için yarı saydam bir gri karedir (html'deki devre dışı bırakıcıların genişliğini / yüksekliğini bağlantınızla eşleşecek şekilde değiştirin). Kayan, sayfanın dinamik olarak yeniden boyutlandırılmasına olanak tanır ve devre dışı bırakıcılar windowResizer () içindeki uygun olanı izler. Google üzerinden uygun görselleri bulabilirsiniz. Basitlik için ilgili css'i satır içine yerleştirdim.

sonra bazı koşullara dayanarak,

$('#backdisabler').css({'visibility':'hidden'});
$('#nextdisabler').css({'visibility':'visible'});

Bence bunların birçoğu aşırı düşünüyor. İstediğin gibi bir sınıf ekle disabled_link.
Sonra css .disabled_link { display: none }
Boom şimdi kullanıcı bağlantıyı göremiyorum olun, böylece onları tıklayarak endişelenmenize gerek kalmayacak. Tıklanabilir bağlantıyı karşılamak için bir şeyler yaparlarsa, sadece jQuery: ile sınıfı kaldırın
$("a.disabled_link").removeClass("super_disabled"). Boom bitti!