jQuery एक लिंक को अक्षम करता है


284

किसी को पता है कि कैसे उपयोग किए बिना jquery में एक लिंक को निष्क्रिय करना है return false;?

विशेष रूप से, मैं जो करने की कोशिश कर रहा हूं, वह किसी आइटम के लिंक को अक्षम करना है, jquery का उपयोग करके उस पर एक क्लिक करना जो कुछ सामान को ट्रिगर करता है, फिर उस लिंक को फिर से सक्षम करना ताकि यदि वह फिर से क्लिक किया जाए तो यह डिफ़ॉल्ट के रूप में काम करता है।

धन्यवाद। डेव

अद्यतन यहाँ कोड है। .expandedकक्षा के लागू होने के बाद उसे क्या करना है, अक्षम लिंक को फिर से सक्षम करना है।

$('ul li').click(function(e) {
    e.preventDefault();
    $('ul').addClass('expanded');
    $('ul.expanded').fadeIn(300);
    //return false;
});

7
आवश्यकता क्यों नहीं झूठी का उपयोग करने के लिए? इसका उपयोग करें, और तब ईवेंट हैंडलर को हटा दें जब यह अब लागू नहीं होता है (या उल्लेखित "कुछ सामान" की स्थिति के आधार पर विभिन्न मूल्यों को वापस करने के लिए इसमें एक सशर्त डाल दिया गया है)।
क्वेंटिन

क्या आप उसी क्लिक कार्रवाई पर लिंक का अनुसरण करने से पहले कुछ पूर्व प्रसंस्करण करने की कोशिश कर रहे हैं? यानी आप दो क्लिक का प्रस्ताव नहीं दे रहे हैं, बल्कि उपयोगकर्ता क्लिक लिंक, कुछ क्रियाएं होती हैं, लिंक का पालन किया जाता है?
लाजर

अन्यथा, क्या आप बता सकते हैं कि आप इस दृष्टिकोण को समस्या की बेहतर समझ के रूप में क्यों ले रहे हैं, इससे उत्तरों में सुधार होगा।
लाजर

@lazarus, मैं एक ही लिंक पर 2 क्लिक प्रस्तावित कर रहा हूं। 1 पहले कुछ सामान करने के लिए, फिर लिंक को लिंक के रूप में व्यवहार करने के लिए 2।
डेव्बोकर

@daviddorward, अब तक मैंने झूठे वापसी की कोशिश की है और यह मेरे लक्ष्य के दूसरे भाग को पूरा करता है, अर्थात 2 क्लिक से गुजरने की अनुमति नहीं देता है। यदि आप एक छोटा उदाहरण लिख सकते हैं तो मैं सबसे आभारी रहूंगा।
डेव्बूकर

जवाबों:


364
$('#myLink').click(function(e) {
    e.preventDefault();
    //do other stuff when a click happens
});

यह हाइपरलिंक के डिफ़ॉल्ट व्यवहार को रोक देगा, जो निर्दिष्ट href पर जाना है।

JQuery ट्यूटोरियल से :

क्लिक और अधिकांश अन्य घटनाओं के लिए, आप jquery.com के लिंक के बाद, डिफ़ॉल्ट व्यवहार को रोक सकते हैं - ईवेंट हैंडलर में event.preventDefault () कॉल करके।

यदि आप preventDefault()केवल एक निश्चित शर्त पूरी होने पर (उदाहरण के लिए कुछ छिपा हुआ है) चाहते हैं, तो आप कक्षा के विस्तार के साथ अपने उल की दृश्यता का परीक्षण कर सकते हैं । यदि यह दिखाई देता है (अर्थात छिपा हुआ नहीं है) तो लिंक को सामान्य रूप से फायर करना चाहिए, जैसे कि यदि स्टेटमेंट दर्ज नहीं किया जाएगा, और इस प्रकार डिफ़ॉल्ट व्यवहार को रोका नहीं जाएगा:

$('ul li').click(function(e) {
    if($('ul.expanded').is(':hidden')) {
        e.preventDefault();
        $('ul').addClass('expanded');
        $('ul.expanded').fadeIn(300);
    } 
});

3
JQuery के 1.7+ के साथ आप पर / बंद का उपयोग कर सकते हैं: stackoverflow.com/questions/209029/…
लांस क्लीवलैंड

अगर यह एक href है और onclick यह $ ("# myLink") काम करेगा। Attr ('onclick', '') .click (function (e) {e.preventDefault ();});
रोनाल्ड मैकडोनाल्ड

ajax और jquery के माध्यम से एहसास हुआ कि मैं इन लिंक को प्राप्त करने से स्क्रेपर्स रखने के लिए कॉलबैक वाले href खरीद सकता हूं। बहुत अच्छे धन्यवाद!
सीजर बिलिच

इस पोस्ट में बूटस्ट्रैप का उपयोग करने का सबसे आसान तरीका है , आशा है कि मदद मिलेगी।
शैजुत

107

इसे इस्तेमाल करे:

$("a").removeAttr('href');

संपादित-

आपके अपडेट किए गए कोड से:

 var location= $('#link1').attr("href");
 $("#link1").removeAttr('href');
 $('ul').addClass('expanded');
 $('ul.expanded').fadeIn(300);
 $("#link1").attr("href", location);

3
Href के साथ खेलना बहुत अच्छा है क्योंकि एक लिंक को डिसबैलेंस करने का एक तेज़ तरीका है जो ऑनक्लिक ईवेंट के माध्यम से कार्रवाई करता है। बहुत बहुत चतुर!
Daitangio

मीठी विधि जब यूआरआई के भीतर # जोड़ने से ब्राउज़र रखने के लिएhref="#"
Abela

65

मेरे जैसे गूगल के माध्यम से यहां आए अन्य लोगों के लिए - यहां एक और दृष्टिकोण है:

css:
.disabled {
  color: grey; // ...whatever
}

jQuery:
$('#myLink').click(function (e) {
  e.preventDefault();
  if ($(this).hasClass('disabled'))
    return false; // Do something else in here if required
  else
    window.location.href = $(this).attr('href');
});

// Elsewhere in your code
if (disabledCondition == true)
  $('#myLink').addClass('disabled')
else
  $('#myLink').removeClass('disabled')

याद रखें: न केवल यह एक सीएसएस वर्ग है

वर्ग = "buttonstyle"

लेकिन ये भी दो

क्लास = "बटनस्टाइल अक्षम"

तो आप आसानी से jQuery के साथ आगे की कक्षाओं को जोड़ और हटा सकते हैं। कोई ज़रूरत नहीं है href छूने की ...

मुझे jQuery पसंद है! ;-)


2
यह मानता है कि लिंक का कोई लक्ष्य नहीं है :)
dstarh

2
यह सब फैंटेसी करने के बजाय, सिर्फ डोम में ऑन्कलिक से अधिक क्यों न करें, on()सभी a.disabledलिंक को फ़िल्टर करने और डिफ़ॉल्ट को रोकने के लिए उपयोग करें । फिर आपको केवल अक्षम वर्ग को चालू / बंद करना है और "सक्षम" होने पर लिंक स्वयं को संभाल लेगा।
कोडकम्प

"== सच" के लिए कोई ज़रूरत नहीं है - addClass ('अक्षम') परवाह किए बिना चलेगा। if(disabledCondition)
फॉक्स विल्सन

1
@fwilson, जबकि आप पूरी तरह से सही हैं, शुरुआत प्रोग्रामर के लिए, इसके साथ समझना आसान है == true। :)
कार्मिकवाद

कोई विशेष कारण यह सरल नहीं है if ($(this).hasClass('disabled')) { e.preventDefault(); }?
मीर

58

यहां एक वैकल्पिक सीएसएस / jQuery समाधान है जो मैं इसकी चंचलता और न्यूनतम स्क्रिप्टिंग के लिए पसंद करता हूं:

सीएसएस:

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

jQuery:

$('.disableAfterClick').click(function (e) {
   $(this).addClass('disabled');
});

7
मोज़िला से : "चेतावनी: गैर-एसवीजी तत्वों के लिए CSS में पॉइंटर-ईवेंट का प्रयोग प्रायोगिक है। यह फीचर CSS3 UI ड्राफ्ट विनिर्देश का हिस्सा हुआ करता था, लेकिन कई खुले मुद्दों के कारण, इसे CSS4 में स्थगित कर दिया गया है।"
द्वंद्वयुद्ध मार्कर्स

1
यह एक अच्छा विचार है, लेकिन यह अधिकांश आधुनिक ब्राउज़रों में अच्छी तरह से काम करने के लिए होता है।
पीटर डेविस

आप चेनिंग विचार करना चाह सकते .prop("tabindex", "-1");बादaddClass
ओलेग Grishko

19

आप नीचे दिए गए लिंक के लिए क्लिक हटा सकते हैं;

$('#link-id').unbind('click');

आप अनुसरण करके लिंक को फिर से सक्षम कर सकते हैं,

$('#link-id').bind('click');

आप लिंक के लिए 'अक्षम' संपत्ति का उपयोग नहीं कर सकते।


1
दूसरों की तुलना में चालू और बंद टॉगल करना आसान है।
python1981

2
"आप लिंक के लिए 'अक्षम' संपत्ति का उपयोग नहीं कर सकते।" आश्चर्य है कि बटन के बीच कोई संगति क्यों नहीं है, और अक्षम करने के लिए एक लिंक है। "अक्षम" को एक लिंक के लिए भी काम करना चाहिए। यह एक चेवी कार के लिए कहने जैसा है कि आपको ब्रेक पैडल को रोकने के लिए हिट करना होगा, लेकिन अन्य कार निर्माता के लिए, आपको छत पर स्थित इस लीवर का उपयोग करना होगा।
बाज़ी 22

14

यदि आप href रूट पर जाते हैं, तो आप इसे सेव कर सकते हैं

निष्क्रिय करने के लिए:

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

फिर उपयोग कर पुनः सक्षम करें:

$('a').each(function(){
    $(this).attr("href", $(this).data("href"));
});

एक मामले में मुझे इसे इस तरह से करना था क्योंकि क्लिक इवेंट पहले से ही कहीं और बंधे हुए थे और मेरा इस पर कोई नियंत्रण नहीं था।


12

मैं हमेशा लिंक को अक्षम करने के लिए jQuery में इसका उपयोग करता हूं

$("form a").attr("disabled", "disabled");

आप $("form a").attr("disabled", false);इसे फिर से सक्षम बनाने के लिए भी उपयोग कर सकते हैं
अलेक्जेंडर राइलिट्स्की

9

html लिंक उदाहरण:

        <!-- boostrap button + fontawesome icon -->
        <a class="btn btn-primary" id="BT_Download" target="blank" href="DownloadDoc?Id=32">
        <i class="icon-file-text icon-large"></i>
        Download Document
        </a>

इसका उपयोग jQuery में करें

    $('#BT_Download').attr('disabled',true);

इसे सीएसएस में जोड़ें:

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

1
मैं इस सीएसएस संपत्ति से पहले कभी नहीं आया था, लेकिन यह मेरे लिए, एक हाइपरलिंक को अक्षम करने के लिए अब तक का सबसे सरल तरीका है। इसकी खूबी यह है कि जब आप उस क्लास को हटाते हैं, जिसमें pointer-events: noneएंकर तत्वों की संपत्ति होती है, तो वे क्लिक करते समय जो कुछ भी करते हैं, उसे करने से पीछे हट जाते हैं। इसलिए यदि वे बुनियादी हाइपरलिंक थे, तो वे अपनी hrefविशेषता में URL पर नेविगेट करने के लिए वापस लौटते हैं , और यदि उनके पास एक क्लिक इवेंट हैंडलर सेट है, जो फिर से सक्रिय हो जाता है। hrefमूल्यों को बचाने की तुलना में बहुत आसान और हैंडलर पर क्लिक करें।
फिलिप स्ट्रैटफ़ोर्ड

मुझे यह समाधान पसंद है, यह सबसे सरल है।
लूइस

"समाधान" के एक मुट्ठी भर से जब कुछ भी काम नहीं किया (और लगभग इस मार्ग को छोड़ दिया), इस मणि के लिए आया था । यह एक नहीं उपद्रव समाधान है। और केवल वही जो वास्तव में काम करता है। कुडोस।
user12379095

5

मेरे fav "चेकआउट में एक आइटम को संपादित करने और कहीं भी चेक-इन कार्यों में जंगली पश्चिम क्लिक को रोकने के लिए"

$('a').click(function(e) {
    var = $(this).attr('disabled');
    if (var === 'disabled') {
        e.preventDefault();
    }
});

इसलिए अगर मैं चाहता हूं कि एक दूसरे एक्शन टूलबार में सभी बाहरी लिंक को "एडिट-मोड" में अक्षम किया जाए, जैसा कि ऊपर वर्णित है, मैं एडिट फ़ंक्शन में जोड़ूंगा

$('#actionToolbar .external').attr('disabled', true);

आग के बाद लिंक उदाहरण:

<a href="http://goo.gl" target="elsewhere" class="external" disabled="disabled">Google</a>

और अब आप लिंक के लिए अक्षम संपत्ति का उपयोग कर सकते हैं

चीयर्स!


3

आपको यहां आपको उत्तर खोजना चाहिए ।

इस सुरुचिपूर्ण समाधान के लिए धन्यवादillill और @Matt।

jQuery('#path .to .your a').each(function(){
    var $t = jQuery(this);
    $t.after($t.text());
    $t.remove();
});


2

बस सामान को ट्रिगर करें, कुछ ध्वज सेट करें, झूठी लौटें। अगर झंडा लगाया गया है - कुछ भी मत करो।


कोशिश की है कि एक कक्षा निर्धारित करके, फिर उस कक्षा को बाद में कॉल करें लेकिन झूठी कैर्री वापस करें, और लिंक को कॉल करने से रोकता है।
डव्बोकर

1

unbind()में पदावनत किया गया था jQuery 3, off()इसके बजाय विधि का उपयोग करें :

$("a").off("click");

0

मुझे पता है कि यह jQuery के साथ नहीं है, लेकिन आप कुछ सरल सीएसएस के साथ एक लिंक को निष्क्रिय कर सकते हैं:

a[disabled] {
  z-index: -1;
}

HTML जैसा दिखेगा

<a disabled="disabled" href="/start">Take Survey</a>

0

यह उन लिंक के लिए काम करता है जिनके पास ऑनक्लिक विशेषता सेट इनलाइन है। यह आपको बाद में सक्षम करने के लिए "वापसी झूठी" को हटाने की अनुमति देता है।

        //disable all links matching class
        $('.yourLinkClass').each(function(index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", "return false; " + OnClickValue);
        });

        //enable all edit links
        $('.yourLinkClass').each(function (index) {
            var link = $(this);
            var OnClickValue = link.attr("onclick");
            link.attr("onclick", OnClickValue.replace("return false; ", ""));
        });

-2

बस उपयोग करें $("a").prop("disabled", true);। यह वास्तव में डे लिंक तत्व को निष्क्रिय कर देगा। की जरूरत है prop("disabled", true)। उपयोग न करेंattr("disabled", true)

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.