ฉันมีปุ่มลิงค์ภายใน<td>ที่ฉันต้องปิดการใช้งาน สิ่งนี้ใช้ได้กับ IE แต่ไม่ทำงานใน Firefox และ Chrome โครงสร้าง - <td>การเชื่อมโยงภายใน ฉันไม่สามารถเพิ่มคอนเทนเนอร์ใด ๆ ใน<td>(เช่น div / span)

ฉันลองทั้งหมดต่อไปนี้ แต่ไม่ทำงานบน Firefox (ใช้ 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');

หมายเหตุ - ฉันไม่สามารถยกเลิกการลงทะเบียนฟังก์ชั่นคลิกสำหรับแท็กจุดยึดได้เนื่องจากมีการลงทะเบียนแบบไดนามิก และฉันต้องแสดงลิงค์ในโหมดคนพิการ

คุณไม่สามารถปิดการใช้งานลิงค์ (ในแบบพกพา) คุณสามารถใช้หนึ่งในเทคนิคเหล่านี้ (แต่ละอันมีข้อดีและข้อเสีย)

วิธี CSS

นี่ควรเป็นวิธีที่ถูกต้อง (แต่ดูในภายหลัง) ให้ทำเมื่อเบราว์เซอร์ส่วนใหญ่สนับสนุน:

a.disabled {
    pointer-events: none;
}

ตัวอย่างเช่น Bootstrap 3.x ทำ ปัจจุบัน (2016) รองรับ Chrome, FireFox และ Opera (19+) เท่านั้น Internet Explorer เริ่มให้การสนับสนุนสิ่งนี้จากเวอร์ชัน 11 แต่ไม่ได้มีไว้สำหรับลิงก์แต่มีอยู่ในองค์ประกอบภายนอกเช่น:

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

ด้วย:

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

วิธีแก้ปัญหา

เราอาจจำเป็นต้องกำหนดคลาส CSS สำหรับpointer-events: noneแต่สิ่งที่ถ้าเรานำมาใช้ใหม่disabledแอตทริบิวต์แทนคลาส CSS หรือไม่? disabledไม่รองรับการพูดอย่างเคร่งครัด<a>แต่เบราว์เซอร์จะไม่บ่นเกี่ยวกับคุณลักษณะที่ไม่รู้จัก การใช้disabledแอตทริบิวต์ IE จะไม่สนใจpointer-eventsแต่ก็จะให้เกียรติเฉพาะ IE disabledแอตทริบิวต์; CSS ที่สอดคล้องกับเบราว์เซอร์อื่น ๆ จะไม่สนใจที่ไม่รู้จัก แอตทริบิวต์และให้เกียรติdisabled pointer-eventsเขียนง่ายกว่าอธิบาย:

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

ตัวเลือกอื่นสำหรับ IE 11 คือการตั้งค่าdisplayองค์ประกอบลิงก์ไปที่blockหรือinline-block:

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

โปรดทราบว่านี่อาจเป็นโซลูชันแบบพกพาหากคุณต้องการสนับสนุน IE (และคุณสามารถเปลี่ยน HTML ของคุณ) แต่ ...

ทั้งหมดนี้กล่าวว่าโปรดทราบว่าpointer-eventsปิดการใช้งานเท่านั้น ... เหตุการณ์ตัวชี้ ลิงก์จะยังคงใช้งานได้ผ่านทางแป้นพิมพ์จากนั้นคุณต้องใช้หนึ่งในเทคนิคอื่น ๆ ที่อธิบายไว้ที่นี่

โฟกัส

เมื่อใช้ร่วมกับเทคนิค CSS ที่อธิบายไว้ข้างต้นคุณอาจใช้tabindexวิธีที่ไม่ได้มาตรฐานเพื่อป้องกันองค์ประกอบที่จะเน้น:

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

ฉันไม่เคยตรวจสอบความเข้ากันได้กับเบราว์เซอร์จำนวนมากดังนั้นคุณอาจต้องการทดสอบด้วยตัวเองก่อนใช้งาน มันมีข้อได้เปรียบในการทำงานโดยไม่ใช้ JavaScript น่าเสียดายที่ แต่tabindexไม่สามารถเปลี่ยนจาก CSS ได้

สกัดกั้นการคลิก

ใช้hrefฟังก์ชันa ถึง JavaScript ตรวจสอบเงื่อนไข (หรือแอตทริบิวต์ที่ปิดใช้งานเอง) และไม่ทำอะไรเลยในกรณีนี้

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

หากต้องการปิดใช้งานลิงก์ให้ทำดังนี้:

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

หากต้องการเปิดใช้งานพวกเขาอีกครั้ง:

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

หากคุณต้องการแทนที่จะ.is("[disabled]")ใช้.attr("disabled") != undefined(jQuery 1.6+ จะกลับมาเสมอundefinedเมื่อไม่ได้ตั้งค่าแอตทริบิวต์) แต่is()ชัดเจนกว่ามาก (ขอบคุณ Dave Stewart สำหรับเคล็ดลับนี้) โปรดทราบที่นี่ฉันกำลังใช้disabledคุณลักษณะในลักษณะที่ไม่ได้มาตรฐานถ้าคุณสนใจเรื่องนี้แล้วแทนที่คุณลักษณะด้วยชั้นเรียนและแทนที่.is("[disabled]")ด้วย.hasClass("disabled")(เพิ่มและลบด้วยaddClass()และremoveClass())

ZoltánTamási ตั้งข้อสังเกตในความคิดเห็นว่า"ในบางกรณีเหตุการณ์การคลิกถูกผูกไว้กับฟังก์ชั่น" ของจริง "บางอย่างแล้ว (ตัวอย่างเช่นการใช้ knockoutjs) ในกรณีนั้นการสั่งซื้อตัวจัดการเหตุการณ์อาจทำให้เกิดปัญหาบางอย่าง จัดการเท็จเพื่อการเชื่อมโยงของtouchstart, mousedownและkeydownเหตุการณ์ที่เกิดขึ้น. แต่ก็มีข้อบกพร่องบางอย่าง (มันจะป้องกันไม่ให้สัมผัสเลื่อนเริ่มต้นในการเชื่อมโยง)"แต่การจัดการเหตุการณ์แป้นพิมพ์ยังมีประโยชน์ในการป้องกันการนำทางแป้นพิมพ์

โปรดทราบว่าหากhrefไม่ได้ล้างผู้ใช้สามารถไปที่หน้านั้นได้ด้วยตนเอง

ล้างลิงก์

ล้างhrefคุณสมบัติ ด้วยรหัสนี้คุณจะไม่เพิ่มตัวจัดการเหตุการณ์ แต่คุณเปลี่ยนลิงค์เอง ใช้รหัสนี้เพื่อปิดการใช้งานลิงค์:

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

และอันนี้เพื่อเปิดใช้งานพวกเขาอีกครั้ง:

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

โดยส่วนตัวแล้วฉันไม่ชอบวิธีนี้มาก (ถ้าคุณไม่ต้องทำอะไรมากกับลิงค์ที่ถูกปิดใช้งาน) แต่มันอาจจะเข้ากันได้มากกว่าเพราะวิธีการต่าง ๆ ในการติดตามลิงค์

ตัวจัดการคลิกปลอม

เพิ่ม / ลบonclickฟังก์ชั่นที่คุณreturn falseลิงค์จะไม่ถูกติดตาม วิธีปิดการใช้งานลิงค์:

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

หากต้องการเปิดใช้งานพวกเขาอีกครั้ง:

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

ฉันไม่คิดว่ามีเหตุผลที่ชอบโซลูชันนี้มากกว่าโซลูชันแรก

การออกแบบ

การจัดแต่งทรงผมนั้นง่ายยิ่งขึ้นไม่ว่าคุณจะใช้วิธีการใดเพื่อปิดการใช้งานลิงก์ที่เราเพิ่มdisabledแอตทริบิวต์เพื่อให้คุณสามารถใช้กฎ CSS ต่อไปนี้:

a[disabled] {
    color: gray;
}

หากคุณใช้คลาสแทนแอตทริบิวต์:

a.disabled {
    color: gray;
}

หากคุณกำลังใช้เฟรมเวิร์ก UI คุณอาจเห็นว่าลิงก์ที่ปิดใช้งานไม่ได้ถูกจัดรูปแบบอย่างเหมาะสม ตัวอย่างเช่น Bootstrap 3.x จัดการสถานการณ์และปุ่มนี้ได้รับการออกแบบอย่างถูกต้องทั้งกับdisabledแอตทริบิวต์และ.disabledคลาส หากคุณกำลังล้างลิงก์ (หรือใช้หนึ่งในเทคนิค JavaScript อื่น ๆ ) แทนคุณจะต้องจัดการกับสไตล์เนื่องจากยัง<a>ไม่มีการhrefทาสีเมื่อเปิดใช้งาน

แอปพลิเคชันอินเทอร์เน็ตที่สามารถเข้าถึงได้หลากหลาย (ARIA)

อย่าลืมรวมแอททริบิวaria-disabled="true"พร้อมกับแอdisabledททริบิว / คลาสด้วย

มีการแก้ไขใน css

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

css ด้านบนเมื่อนำไปใช้กับแท็กจุดยึดจะปิดการใช้งานเหตุการณ์การคลิก

สำหรับรายละเอียดการชำระเงินลิงค์นี้

ขอบคุณทุกคนที่โพสต์โซลูชั่น (โดยเฉพาะ @AdrianoRepetti) ฉันรวมหลายวิธีเพื่อให้มีdisabledฟังก์ชั่นขั้นสูงมากขึ้น(และทำงานข้ามเบราว์เซอร์) รหัสด้านล่าง (ทั้ง ES2015 และ coffeescript ตามการตั้งค่าของคุณ)

สิ่งนี้ให้การป้องกันหลายระดับเพื่อให้แองเคอร์ทำเครื่องหมายว่าปิดใช้งานได้จริงเช่นนี้ เมื่อใช้วิธีนี้คุณจะได้สมอที่ไม่สามารถ:

• คลิก
• แท็บไปและกดส่งคืน
• การแท็บไปที่ตำแหน่งนั้นจะเป็นการย้ายโฟกัสไปยังองค์ประกอบที่สามารถโฟกัสได้ถัดไป
• จะทราบว่าสมอถูกเปิดใช้งานในภายหลัง

ทำอย่างไร

1. รวม CSS นี้เนื่องจากเป็นด่านแรกในการป้องกัน สิ่งนี้จะถือว่าตัวเลือกที่คุณใช้คือa.disabled

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

2. ถัดไปยกตัวอย่างคลาสนี้ให้พร้อม (พร้อมตัวเลือกเสริม):

     new AnchorDisabler()

คลาส ES2015

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:

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

ลององค์ประกอบ:

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

ปิดการใช้งานการเชื่อมโยงการทำงานสำหรับฉันใน Chrome: http://jsfiddle.net/KeesCBakker/LGYpz/

Firefox ดูเหมือนจะเล่นไม่ดี ตัวอย่างนี้ใช้งานได้:

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

หมายเหตุ: เพิ่มคำสั่ง 'สด' สำหรับลิงก์ที่ปิดใช้งาน / เปิดใช้งานในอนาคต
Note2: เปลี่ยน 'live' เป็น 'on'

Bootstrap 4.1 เป็นคลาสที่มีชื่อdisabledและaria-disabled="true"คุณสมบัติ

ตัวอย่าง"

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

เพิ่มเติมเกี่ยวกับ getbootstrap.com

ดังนั้นหากคุณต้องการทำให้เป็นแบบไดนามิกและyou don't want to care if it is button or ancorในสคริปต์ JS คุณต้องการสิ่งนั้น

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

แต่ระวังให้ดี

โซลูชันใช้งานได้กับลิงก์ที่มีคลาสbtn btn-linkเท่านั้น

บางครั้งบูตแนะนำให้ใช้card-linkระดับในการแก้ปัญหากรณีนี้จะไม่ทำงาน

ฉันลงเอยด้วยวิธีแก้ปัญหาด้านล่างซึ่งสามารถทำงานกับทั้งแอตทริบิวต์<a href="..." disabled="disabled">หรือคลาส<a href="..." class="disabled">:

รูปแบบ CSS:

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

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

Javascript (พร้อมสำหรับ jQuery):

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

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

คุณไม่สามารถปิดการใช้งานการเชื่อมโยงเช่นถ้าคุณต้องการคลิกเหตุการณ์ที่ไม่ควรยิงแล้วก็จากการเชื่อมโยงว่าRemoveaction

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

สำหรับข้อมูลเพิ่มเติม: - องค์ประกอบที่สามารถปิดการใช้งาน

ฉันจะทำอะไรเช่น

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

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

สิ่งนี้จะทำงานได้ดี คุณเพิ่มคลาสสำหรับลิงค์ที่คุณต้องการปิดการใช้งานและจากนั้นคุณกลับเท็จเมื่อมีคนคลิกพวกเขา เพื่อให้พวกเขาสามารถลบชั้นเรียนได้

หากต้องการปิดใช้งานลิงก์เพื่อเข้าถึงหน้าอื่นบนอุปกรณ์ระบบสัมผัส:

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

ในมีดโกน (.cshtml) คุณสามารถทำได้:

@{
    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 หรือปุ่มลิงก์ใน html

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

มีอีกวิธีหนึ่งที่เป็นไปได้และวิธีที่ฉันชอบที่สุด โดยพื้นฐานแล้วมันเป็นวิธีเดียวที่ไลท์บ็อกซ์ปิดการใช้งานทั้งหน้าโดยการวาง div และเล่นซอกับ z-index นี่คือตัวอย่างที่เกี่ยวข้องจากโครงการของฉัน มันใช้ได้กับทุกเบราว์เซอร์ !!!!!

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

และใน html

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

ดังนั้นตัวปรับขนาดจะค้นหาตำแหน่งของสมอ (รูปภาพเป็นเพียงลูกศร) และวางตัวแยกส่วนด้านบน รูปภาพของตัวแยกสัญญาณเป็นสี่เหลี่ยมสีเทาโปร่งแสง (เปลี่ยนความกว้าง / ความสูงของตัวแยกรูปใน html ให้ตรงกับลิงก์ของคุณ) เพื่อแสดงว่ามันถูกปิดใช้งาน การลอยช่วยให้หน้าปรับขนาดแบบไดนามิกและ disablers จะตามหลังชุดใน windowResizer () คุณสามารถค้นหารูปภาพที่เหมาะสมผ่าน google ฉันได้วาง css ที่เกี่ยวข้องเพื่อความเรียบง่าย

จากนั้นขึ้นอยู่กับเงื่อนไขบางอย่าง

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

ฉันคิดว่าสิ่งเหล่านี้มากมายเกินความคิด disabled_linkเพิ่มระดับของสิ่งที่คุณต้องการเช่น
จากนั้นทำให้ css มี.disabled_link { display: none }
Boom ทันทีที่ผู้ใช้ไม่สามารถเห็นลิงก์ดังนั้นคุณจะไม่ต้องกังวลกับการคลิก ถ้าพวกเขาทำบางสิ่งบางอย่างเพื่อตอบสนองการเชื่อมโยงที่ถูกคลิกได้เพียงลบชั้นเรียนกับ
$("a.disabled_link").removeClass("super_disabled")jQuery: บูมเสร็จแล้ว!