วิธีการเปิดหรือปิดการใช้งานสมอโดยใช้ jQuery

วิธีการเปิดหรือปิดการใช้งานสมอโดยใช้ jQuery

เพื่อป้องกันการยึดจากการติดตามที่ระบุhrefฉันขอแนะนำให้ใช้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();
    });
});

ดู:

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

ดูคำถามก่อนหน้านี้ใน SO:

jQuery ปิดการใช้งานลิงค์

แอพที่ฉันกำลังทำงานอยู่นั้นใช้สไตล์ CSS ร่วมกับจาวาสคริปต์

a.disabled { color:gray; }

จากนั้นเมื่อใดก็ตามที่ฉันต้องการปิดการใช้งานลิงก์ที่ฉันโทร

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

จากนั้นในตัวจัดการคลิกของแท็ก 'thelink' ฉันจะเรียกใช้สิ่งแรกเสมอ

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

ฉันพบคำตอบที่ฉันชอบมากขึ้นที่นี่

ดูเหมือนว่านี้:

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

การเปิดใช้งานจะเกี่ยวข้องกับการตั้งค่าแอตทริบิวต์ href

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

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

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

}); 

ฉันคิดว่าโซลูชันที่ดีกว่าคือการตั้งค่าคุณลักษณะข้อมูลที่ปิดใช้งานและยึดการตรวจสอบเมื่อคลิก วิธีนี้เราสามารถปิดการใช้งานสมอชั่วคราวจนกว่าเช่นจาวาสคริปต์จะเสร็จสิ้นด้วยการโทร ajax หรือการคำนวณบางอย่าง หากเราไม่ปิดใช้งานเราสามารถคลิกได้อย่างรวดเร็วสองสามครั้งซึ่งไม่เป็นที่ต้องการ ...

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

ฉันทำตัวอย่าง jsfiddle: http://jsfiddle.net/wgZ59/76/

คำตอบที่เลือกไม่ดี

ใช้สไตล์ CSS ตัวชี้เหตุการณ์ (ตามที่แนะนำจาก Rashad Annara)

ดู MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events มันรองรับเบราว์เซอร์ส่วนใหญ่

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

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

ลองบรรทัดด้านล่าง

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

เพราะแม้ว่าคุณจะปิดการใช้งาน<a>แท็กhrefคุณก็จะต้องลบhrefมันด้วย

เมื่อคุณต้องการเปิดใช้งานลองบรรทัดด้านล่าง

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

มันง่ายเหมือนการตีกลับผิด ๆ

อดีต

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

หรือ

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

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

ในไฟล์ css

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

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

หากวิธีการนี้เรียกว่าการกระทำเริ่มต้นของกิจกรรมจะไม่ถูกเรียก

หากคุณพยายามปิดกั้นการโต้ตอบทั้งหมดกับหน้าเว็บคุณอาจต้องการดูปลั๊กอิน jQuery BlockUI

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

ขั้นแรกคุณต้องการทราบวิธีการตั้งค่าเป็นปิดการใช้งานสำหรับการที่คุณจะใช้ฟังก์ชั่นคุณสมบัติ JQuery ของและมีฟังก์ชั่นที่เกิดขึ้นในเหตุการณ์เช่นการคลิกหรือการโหลดเอกสาร

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

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

คำตอบโดย @ michael-meadows ให้ทิปกับฉัน แต่สิ่งนี้ยังคงกล่าวถึงสถานการณ์ที่คุณยังต้องทำงานกับ jQuery / JS ในกรณีนี้หากคุณสามารถควบคุมการเขียน html เองเพียงแค่ x-ing แท็ก href นั้นเป็นสิ่งที่คุณต้องทำดังนั้นการแก้ปัญหาจึงเป็น HTML ที่บริสุทธิ์!

โซลูชันอื่น ๆ ที่ไม่มี jQuery finagling ซึ่งเก็บ href ต้องให้คุณใส่ # ใน href แต่นั่นทำให้หน้าเด้งขึ้นไปด้านบนและคุณแค่ต้องการให้มันปิดการใช้งานแบบเก่า หรือปล่อยว่างไว้ แต่ขึ้นอยู่กับเบราว์เซอร์ซึ่งยังคงทำสิ่งต่าง ๆ เช่นข้ามไปด้านบนและเป็น HTML ที่ไม่ถูกต้องตาม IDEs แต่เห็นได้ชัดว่าaแท็กเป็น HTML ที่ถูกต้องทั้งหมดโดยไม่มี HREF

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

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

ดังนั้นด้วยการรวมกันของคำตอบข้างต้นฉันจึงได้สิ่งนี้ขึ้นมา

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

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

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

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

จากนั้นใช้ jQuery คุณสามารถทำได้เมื่อคุณต้องการแสดงข้อความแทนลิงค์

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

ด้วยวิธีนี้เราสามารถแทนที่แท็ก anchor ด้วยแท็ก div นี่ง่ายกว่ามาก (แค่ 2 บรรทัด) และถูกต้องทางความหมายเช่นกัน (เพราะเราไม่ต้องการลิงค์ตอนนี้ดังนั้นจึงไม่ควรมีลิงค์)

ปิดใช้งานหรือเปิดใช้งานองค์ประกอบใด ๆ ด้วยคุณสมบัติที่ถูกปิดใช้งาน

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

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