কীভাবে jQuery ব্যবহার করে একটি অ্যাঙ্কর সক্ষম বা অক্ষম করবেন?


150

কীভাবে jQuery ব্যবহার করে একটি অ্যাঙ্কর সক্ষম বা অক্ষম করবেন?


আপনার সমস্ত উত্তরের জন্য ধন্যবাদ, এখনও এটি কাজ করছে না তাই আপনি এটি নথির সাথে কাজ করতে পারেন দয়া করে
কুমার ভাস্করণ

আপনি যদি কোডটির স্নিপেট কাজ করে না তবে এটি পোস্ট করতে সহায়তা করবে।
হোরে আই এম

আসলে আমার কোডিংটি কারাগারে রয়েছে এবং আমার কোডিংটি <% = foo.add_associated_link ('ইমেল যুক্ত করুন', @ প্রকল্প.email.build)%> এটি যখন আমি ব্রাউজারে রেন্ডার করি তখন আমি ইমেলটি দেখতে পারি তবে আমি এটিকে অক্ষমও করতে পারি না আমি ই.প্রিভেন্ট ডেফল্ট () এর মতো কোডিং দিয়ে চেষ্টা করেছেন তবে কোনও ফল হয়নি
সেন্থিল কুমার ভাস্করান

উত্তর:


194

কোনও অ্যাঙ্করকে নির্দিষ্টভাবে অনুসরণ করা থেকে বিরত রাখতে 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

এছাড়াও পূর্ববর্তী প্রশ্নটি এসও তে দেখুন:

jQuery একটি লিঙ্ক অক্ষম


আমি "অ্যাটর্ন" এর সাথে চেষ্টা করেছিলাম এটি অ্যাঙ্কর ট্যাগে নয় কেবল ফর্ম এলিমেন্টে কাজ করছে।
সেন্থিল কুমার ভাস্করণ

1
@ অ্যাসিডিল - প্রতিরোধ ডিফল্টকে এটি করার 'যথাযথ' উপায় হিসাবে বিবেচনা করা হয়, আমার সম্পাদনা দেখুন (অন্য কিউ + এ-এর লিঙ্ক)
করিম Jul৯ জুলাই'২০

আসলে আমার কোডিংটি কারাগারে রয়েছে এবং আমার কোডিংটি <% = foo.add_associated_link ('ইমেল যুক্ত করুন', @ প্রকল্প.email.build)%> এটি যখন আমি ব্রাউজারে রেন্ডার করি তখন আমি ইমেলটি দেখতে পারি তবে আমি এটিকে অক্ষমও করতে পারি না আমি ই.প্রিভেডেন্টস ডিফল্ট () এর মতো কোডিং দিয়ে চেষ্টা করেছিলেন তবে কোনও ফল হয়নি
সেন্থিল কুমার ভাস্করান

2
আমি কীভাবে বিপরীত করব $('a.something').on("click", function (e) { e.preventDefault(); });?
レ ッ ク ス

2
অসম্মতি, CSS ব্যবহার করুন "পয়েন্টার-ইভেন্ট: কিছুই নয়" পরিবর্তে, অন্যান্য unswers মত।
ভিট্রিলো

116

আমি বর্তমানে যে অ্যাপটিতে কাজ করছি তাতে এটি জাভাস্ক্রিপ্টের সাথে সিএসএস শৈলীতে কাজ করে।

a.disabled { color:gray; }

তারপরে আমি যখনই কোনও লিঙ্কটি অক্ষম করতে চাই তখনই কল করি

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

তারপরে, 'লিঙ্ক' ট্যাগের জন্য ক্লিক হ্যান্ডলারে আমি সর্বদা একটি চেক প্রথম জিনিস চালাই

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

6
সেই শেষ লাইনে "মিথ্যা ফিরুন;" বলা উচিত নয়?
Prestaul

1
শুভ ডাক, প্রেস্টাউল। যখন কোনও <a> ট্যাগের সাথে আবদ্ধ থাকে, তখন আমি ব্যবহার করছি: <a href="w काहीही" onclick=" আবার নিষ্ক্রিয়কিংক লিঙ্ক( এই))>> তবে: ফাংশন অক্ষম করুন লিংক (নোড) {যদি (dojo.hasClass (নোড, 'অক্ষম') প্রত্যাবর্তন করুন; dojo.addClass (নোড, 'অক্ষম'); সত্য প্রত্যাবর্তন করুন; মিথ্যা)।
নিক

নোট করুন যে হ্যান্ডলারে আপনার সম্ভবত $ ("লিঙ্ক") এর পরিবর্তে use (এটি) ব্যবহার করা উচিত যেহেতু এটি পরিবর্তন হতে পারে বা ব্যবহারকারী সহজেই কোডটি অনুলিপি / অনুলিপি করতে পারে।
অ্যালেক্সিস উইলকে

2
আপনাকে অক্ষম শৈলীতে 'কার্সার: ডিফল্ট' যুক্ত করার পরামর্শ দিন।
স্টুয়ার্ট হ্যালোজ

40

আমি একটি উত্তর পেয়েছি যা আমি এখানে আরও ভাল পছন্দ করি

এটা এমন দেখতে:

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

এটি আপনাকে চেহারাটি দেয় যে অ্যাঙ্কর উপাদানটি স্বাভাবিক পাঠ্য হয়ে যায় এবং বিপরীতে।



12

আমি মনে করি যে একটি উত্তম সমাধান হ'ল অক্ষম ডেটা অ্যাট্রিবিউট সেট করা এবং ক্লিকের জন্য এটির জন্য একটি চেক অ্যাঙ্কর করা। এইভাবে জাভা স্ক্রিপ্টটি অ্যাজাক্স কল বা কিছু গণনা সহ শেষ না হওয়া পর্যন্ত আমরা অস্থায়ীভাবে একটি অ্যাঙ্কর অক্ষম করতে পারি। যদি আমরা এটি অক্ষম না করি, তবে আমরা দ্রুত কয়েকবার এটি ক্লিক করতে পারি, যা অনাকাঙ্ক্ষিত ...

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

আমি একটি জিসফিল উদাহরণ তৈরি করেছি: http://jsfiddle.net/wgZ59/76/


11

নির্বাচিত উত্তরটি ভাল নয়।

পয়েন্টার-ইভেন্টগুলি সিএসএস স্টাইল ব্যবহার করুন । (রাশাদ আনারার পরামর্শ মতো)

MDN https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events দেখুন । এটি বেশিরভাগ ব্রাউজারগুলিতে সমর্থিত।

আপনার যদি বিশ্বব্যাপী সিএসএস নিয়ম নীচের মতো থাকে তবে অ্যাঙ্কারে সাধারণ "অক্ষম" বৈশিষ্ট্যটি কাজটি করবে:

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

পয়েন্টার-ইভেন্টগুলির সাথে আপনাকেও অন্তর্ভুক্ত করতে হবে না: পয়েন্টার ইভেন্ট হিসাবে হওর অবস্থা। আপনার কেবলমাত্র একজন [অক্ষম] নির্বাচক অন্তর্ভুক্ত করা দরকার।
ল্যারি ডিউক

10

নীচের লাইনের চেষ্টা করুন

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

কোজ, এমনকি আপনি <a>ট্যাগ অক্ষম করলেও hrefকাজ করবে তাই আপনাকে অবশ্যই মুছে ফেলতে হবে href

আপনি যখন সক্ষম চান লাইনের নীচে চেষ্টা করুন

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

1
এএসপিএনটি এমভিসি অ্যাকশনলিংকের সাথে জিকুয়ারি ব্যবহার করার সময় আমার ঠিক এটি প্রয়োজন ছিল। ধন্যবাদ!
eaglei22

8

এটি রিটার্ন মিথ্যা হিসাবে সহজ;

প্রাক্তন।

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

অথবা

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


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

যদি এই পদ্ধতিটি বলা হয়, ইভেন্টের ডিফল্ট ক্রিয়াটি ট্রিগার করা হবে না।



4

আপনি কীভাবে তাদের অক্ষম করতে চেয়েছিলেন বা কী কারণে অক্ষম হওয়ার কারণ হবে তা আপনি কখনই সত্যই নির্দিষ্ট করেন নি।

প্রথমত, আপনি কীভাবে অক্ষমকে মান সেট করবেন তা নির্ধারণ করতে চান, তার জন্য আপনি JQuery এর অ্যাট্রিবিউট ফাংশন ব্যবহার করবেন এবং কোনও ফাংশনটি কোনও ইভেন্টে ঘটবে যেমন ক্লিক বা ডকুমেন্টের লোডের মতো।


1

অ্যাঙ্কর ট্যাগের মধ্যে আপনাকে অবশ্যই পাঠ্য বা এইচটিএমএল সামগ্রী রাখতে হবে তবে সেই উপাদানটি ক্লিক করা হলে আপনি কেবল কোনও পদক্ষেপ গ্রহণ করতে চান না (যেমন আপনি যখন প্যাগিনেটর লিঙ্কটি অক্ষম অবস্থায় থাকতে চান তবে এটি কারণ বর্তমান পৃষ্ঠা), কেবল href কেটে দিন। ;)

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

@ মাইকেল-ঘাসের উত্তরগুলি আমাকে এ সম্পর্কে জানায়, তবে তিনি এখনও এমন পরিস্থিতিতেগুলিকে সম্বোধন করেছিলেন যেখানে আপনি এখনও jQuery / জেএস এর সাথে কাজ করছেন / করছেন। এই ক্ষেত্রে, যদি এইচটিএমএলটি নিজেই লেখার উপর আপনার নিয়ন্ত্রণ থাকে তবে কেবল href ট্যাগের এক্স-ইনগিংয়ের জন্য আপনাকে যা করতে হবে তা হল, তাই সমাধানটি একটি খাঁটি এইচটিএমএল!

জিকুয়েরি ফাইনগলিং ছাড়া অন্যান্য সমাধান যা হ্রেফকে রেখেছে আপনার জন্য একটি # টি href লাগানো দরকার, তবে এটি পৃষ্ঠায় শীর্ষে নেমে আসে এবং আপনি কেবল এটি প্লেইন পুরানো অক্ষম হওয়া চাই। বা এটিকে খালি রেখে দেওয়া, তবে ব্রাউজারের উপর নির্ভর করে এটি এখনও শীর্ষে লাফানোর মতো জিনিসগুলি করে এবং এটি আইডিই অনুসারে এটি অবৈধ এইচটিএমএল। তবে দৃশ্যত কোনও aট্যাগ এইচআরএফ ছাড়া সম্পূর্ণ বৈধ এইচটিএমএল।

শেষ অবধি, আপনি বলতে পারেন: ঠিক আছে, কেন কেবল একটি ট্যাগ পুরোপুরি না ফেলে? যেহেতু প্রায়শই আপনি পারবেন না, aট্যাগটি সিএসএস ফ্রেমওয়ার্কে স্টাইলিং উদ্দেশ্যে বা বুটস্ট্র্যাপের প্যাগিনেটারের মতো আপনি ব্যবহার করছেন নিয়ন্ত্রণের জন্য ব্যবহার করা হয়:

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


1

সুতরাং উপরের প্রতিক্রিয়াগুলির সংমিশ্রণের সাথে আমি এটি নিয়ে এসেছি।

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

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

0

যদি আপনার অ্যাঙ্কর ট্যাগ হিসাবে আচরণ করার প্রয়োজন না হয় তবে আমি এটিকে একেবারে প্রতিস্থাপন করতে পছন্দ করব। উদাহরণস্বরূপ, যদি আপনার অ্যাঙ্কর ট্যাগটি পছন্দ হয়

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

সুতরাং এইভাবে, আমরা কেবল একটি ডিভ ট্যাগের সাথে অ্যাঙ্কার ট্যাগটি প্রতিস্থাপন করতে পারি। এটি অনেক সহজ (মাত্র ২ টি লাইন) এবং শব্দার্থগতভাবেও সঠিক (কারণ আমাদের এখন কোনও লিঙ্কের প্রয়োজন নেই তাই লিঙ্কটি থাকা উচিত নয়)


0

অক্ষম সম্পত্তি সহ কোনও উপাদান অক্ষম বা সক্ষম করুন।

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

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

এই উত্তরটি কেন ভোট দেওয়া হচ্ছে? এটি "jQuery ব্যবহার করে কোনও অ্যাঙ্কর সক্ষম বা অক্ষম করবেন কীভাবে?" এই প্রশ্নের উত্তর দেয়?
রিচিডি

আমি বিশ্বাস করি কারণ এটি অ্যাঙ্কারে ক্লিক করার পরে লিঙ্কগুলি এখনও খোলা থাকে।
জোম্বায়া
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.