এইচটিএমএল লিঙ্কগুলি কীভাবে অক্ষম করবেন

Question

ক এর ভিতরে আমার একটি লিঙ্ক বোতাম আছে <td> যা আমাকে অক্ষম করতে হবে। এটি IE এ কাজ করে তবে ফায়ারফক্স এবং ক্রোমে কাজ করে না। স্ট্রাকচারটি হ'ল ক এর ভিতরে লিঙ্ক <td>। আমি <td>( কোনও দ্বি / স্প্যানের মতো) কোনও ধারক যুক্ত করতে পারি না

আমি নিম্নলিখিত সমস্ত চেষ্টা করেছি কিন্তু ফায়ারফক্সে (1.4.2 জেএস ব্যবহার করে) কাজ করছি না:

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


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

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

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

দ্রষ্টব্য - আমি অ্যাঙ্কর ট্যাগের জন্য ক্লিক ফাংশনটি অ-নিবন্ধভুক্ত করতে পারি না কারণ এটি গতিযুক্তভাবে নিবন্ধিত হয়েছে। এবং আমি অক্ষম মোডে লিঙ্কটি দেখানোর আছে।

Comments

সিএসএস শুধুমাত্র প্রশ্ন: stackoverflow.com/questions/2091168/disable-a-link-using-css

— সিরো Santilli郝海东冠状病六四事件法轮功

Answer 1

আপনি কোনও লিঙ্ক অক্ষম করতে পারবেন না (পোর্টেবল উপায়ে)। আপনি এই কৌশলগুলির একটি ব্যবহার করতে পারেন (প্রত্যেকে তার নিজস্ব সুবিধা এবং অসুবিধাগুলি সহ)।

সিএসএস উপায়

এই হওয়া উচিত সঠিক ভাবে (কিন্তু পরে দেখুন) তা করতে যখন ব্রাউজার সবচেয়ে এটিকে সমর্থন করে হবে:

a.disabled {
    pointer-events: none;
}

উদাহরণস্বরূপ, বুটস্ট্র্যাপ 3.x এটি যা করে। বর্তমানে (2016) এটি কেবলমাত্র ক্রোম, ফায়ারফক্স এবং অপেরা (19+) দ্বারা ভাল সমর্থন করেছে। ইন্টারনেট এক্সপ্লোরার 11 সংস্করণ থেকে এটি সমর্থন করা শুরু করেছিল তবে লিঙ্কগুলির জন্য নয় তবে এটি বাইরের উপাদানগুলিতে যেমন পাওয়া যায়:

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

সঙ্গে:

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

কার্যসংক্রান্ত

আমরা সম্ভবত প্রয়োজন একটি সিএসএস ক্লাস সংজ্ঞায়িত করতে pointer-events: noneকিন্তু যদি আমরা পুনরায় ব্যবহারdisabled একটি CSS ক্লাসের পরিবর্তে অ্যাট্রিবিউট? কড়া কথা বলতে disabledসমর্থিত নয় <a>তবে ব্রাউজারগুলি অজানা বৈশিষ্ট্যের জন্য অভিযোগ করবে না । আইবি disabledবৈশিষ্ট্যটি ব্যবহার করা উপেক্ষা করবে pointer-eventsতবে এটি আইই নির্দিষ্ট disabledবৈশিষ্ট্যকে সম্মান করবে ; অন্যান্য সিএসএস অনুবর্তী ব্রাউজারগুলি অজানা disabled বৈশিষ্ট্য এবং সম্মান উপেক্ষা করবে pointer-events। লেখার চেয়ে বোঝা সহজ:

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

আইই ১১ এর জন্য অন্য একটি বিকল্প হল displayলিঙ্ক উপাদানগুলিকে সেট করতে blockবা এতে inline-block:

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

নোট করুন যে আপনি যদি IE সমর্থন করতে চান তবে এটি পোর্টেবল সমাধান হতে পারে (এবং আপনি নিজের HTML পরিবর্তন করতে পারেন) তবে ...

এই সমস্ত বলেছেন দয়া করে মনে রাখবেন যে pointer-eventsকেবলমাত্র পয়েন্টার ইভেন্টগুলি অক্ষম করে । লিঙ্কগুলি কীবোর্ডের মাধ্যমে চলাচল করতে সক্ষম হবে তারপরে আপনার এখানে বর্ণিত অন্যান্য কৌশলগুলির মধ্যে একটি প্রয়োগ করতে হবে।

কেন্দ্রবিন্দু

উপরোক্ত বর্ণিত সিএসএস কৌশলটির সাথে একত্রে আপনি tabindexকোনও উপাদানকে ফোকাস করা রোধ করতে অ-মানক উপায়ে ব্যবহার করতে পারেন :

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

অনেক ব্রাউজারের সাথে এর সামঞ্জস্যতা আমি কখনও চেক করি নি তবে আপনি এটি ব্যবহারের আগে নিজের দ্বারা এটি পরীক্ষা করতে চাইতে পারেন। এটি জাভাস্ক্রিপ্ট ছাড়া কাজ করার সুবিধা আছে। দুর্ভাগ্যক্রমে (তবে স্পষ্টতই) tabindexসিএসএস থেকে পরিবর্তন করা যায় না।

ইন্টারসেপ্ট ক্লিকগুলি

একটি ব্যবহার করুন hrefএকটি 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( undefinedঅ্যাট্রিবিউট সেট না করা থাকলে jQuery 1.6+ সর্বদা ফিরে আসবে ) তবে is()আরও পরিষ্কার (এই টিপটির জন্য ডেভ স্টুয়ার্টকে ধন্যবাদ)। এখানে লক্ষ্য করুন আমি ব্যবহার করছি দয়া করে disabledকোনো অ-মানক ভাবে অ্যাট্রিবিউট, আপনি এই যত্নশীল তারপর একটি বর্গ সঙ্গে অ্যাট্রিবিউট প্রতিস্থাপন এবং প্রতিস্থাপন .is("[disabled]")সঙ্গে .hasClass("disabled")(যুক্ত করা এবং সঙ্গে সরানোর addClass()এবং removeClass())।

জোল্টন তমাসি একটি মন্তব্যে উল্লেখ করেছেন যে "কিছু ক্ষেত্রে ক্লিক ইভেন্টটি ইতিমধ্যে কিছু" বাস্তব "ফাংশনে আবদ্ধ (উদাহরণস্বরূপ নকআউটজ ব্যবহার করে) সেক্ষেত্রে ইভেন্ট হ্যান্ডলারের ক্রম কিছু ঝামেলা সৃষ্টি করতে পারে Hence তাই আমি একটি ফেরত বেঁধে অক্ষম লিঙ্কগুলি প্রয়োগ করেছি লিংক এর মিথ্যা হ্যান্ডলার 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বৈশিষ্ট্য যুক্ত করেছি যাতে আপনি নিম্নলিখিত সিএসএস বিধি ব্যবহার করতে পারেন:

a[disabled] {
    color: gray;
}

আপনি যদি বৈশিষ্ট্যের পরিবর্তে কোনও ক্লাস ব্যবহার করছেন:

a.disabled {
    color: gray;
}

আপনি যদি কোনও ইউআই কাঠামো ব্যবহার করছেন তবে আপনি দেখতে পাবেন অক্ষম লিঙ্কগুলি সঠিকভাবে স্টাইল করা হয়নি। উদাহরণস্বরূপ, বুটস্ট্র্যাপ 3.x, এই দৃশ্যটি পরিচালনা করে এবং বোতামটি যথাযথ disabledবৈশিষ্ট্যযুক্ত এবং .disabledশ্রেণি উভয়ই সঠিকভাবে স্টাইল করা হয়েছে । যদি পরিবর্তে, আপনি লিঙ্কটি সাফ করছেন (বা অন্যদের মধ্যে একটি জাভাস্ক্রিপ্ট কৌশল ব্যবহার করছেন) আপনাকে অবশ্যই স্টাইলিং পরিচালনা করতে হবে কারণ একটি <a>ছাড়াhref এখনও সক্ষম হিসাবে আঁকা হয়েছে।

অ্যাক্সেসযোগ্য সমৃদ্ধ ইন্টারনেট অ্যাপ্লিকেশন (এআরআইএ)

অ্যাট্রিবিউট / ক্লাসের aria-disabled="true"সাথে একটি বৈশিষ্ট্যও একসাথে অন্তর্ভুক্ত করতে ভুলবেন না disabled।

Comments

ঠিক। তবে আরও সহজ রক্ষণাবেক্ষণের জন্য আমি td aঅক্ষম থাকতে পারে এমন সকলের সাথে ক্লিক ইভেন্ট হ্যান্ডলার যুক্ত করব, যা সত্য event.preventDefault()হলে কল করবে $(this).data('disabled')এবং তারপরে data('disabled', true)যে কোনও লিঙ্কে আমি অক্ষম করতে চাই সেট করতে সক্ষম করব (সক্ষম করতে মিথ্যা, ইত্যাদি)

— ori

@ অঙ্কিত উপস্থিতির জন্য আপনার সিএসএস রয়েছে! 'অক্ষম' লিঙ্কগুলির জন্য এই জাতীয় [অক্ষম]: রঙ: ধূসর like

— অ্যাড্রিয়ানো রিপিটি

ব্রাউজার-সমর্থন দ্রুত আপডেট । (...: নোট যদিও IE11 পয়েন্টার-ঘটনা সমর্থন করে, সেখানে একটি ছোট খোশগল্প যে বলেছেন লিঙ্কে কাজ করে না

— আগস্ট

$(this).is('[disabled]')অক্ষম বৈশিষ্ট্যটি সনাক্ত করার একটি দুর্দান্ত উপায় হতে পারে

— ডেভ স্টুয়ার্ট

জোন, আমি এটাকে বেশি পছন্দ করি না। প্রথমত কারণ কীবোর্ড নেভিগেশন এখনও কাজ করে। দ্বিতীয় কারণ এটি একটি কৌশল (এগুলি কেবল অন্য কোনও কিছু যদি কাজ না করে তবে তা কার্যকর হতে পারে)। তৃতীয় কারণ কিছু লোক জাভাস্ক্রিপ্টকে অক্ষম রাখে এবং এই ক্ষেত্রে আপনার সুরক্ষার কোনও "স্তর" নেই don't চতুর্থ কারণ এটি এখানে সবচেয়ে জটিল সমাধান (যখন কয়েকটি জাভাস্ক্রিপ্ট লাইন কাজ করতে পারে)

— অ্যাড্রিয়ানো রেপিটি

Answer 2

সিএসএসে ফিক্স পেয়েছি।

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

অ্যাঙ্কর ট্যাগ প্রয়োগ করার পরে উপরের সিএসএস ক্লিক ইভেন্টটি অক্ষম করবে।

বিশদ জন্য এই লিঙ্ক চেকআউট

Comments

এটি একটি দুর্দান্ত সমাধান তবে এটি অনুমান করা হয় না ... অনুমান ... ইন্টারনেট এক্সপ্লোরার।

— অ্যাড্রিয়ানো রেপিটি

এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত

— অঙ্কিত

ইন্টারনেট এক্সপ্লোরার এবং অপেরাতে এটি HTML এর জন্য সমর্থন করা উচিত নয় be

— অ্যাড্রিয়ানো রেপিটি

অংকিত, এটি আইই 9 এবং এর নীচে কাজ করে না। আপনি কি আইই 10 ব্যবহার করছেন?

— মনদীপ জৈন

এটি অ্যাড্রিয়ানো পুনরায় হিসাবে উপরে উল্লিখিত হিসাবে কীবোর্ড ইভেন্টগুলি কেস ব্যবহার ব্যর্থ হয়। ব্যবহারকারী এখনও লিঙ্কটিতে ট্যাব করতে পারেন এবং এন্টার টিপুন।

— খাঁচা র‌্যাটার

Answer 3

সমাধান পোস্ট করা প্রত্যেককে ধন্যবাদ (বিশেষত @ অ্যাড্রিয়ানোরেপ্টি), আমি আরও কিছু উন্নত সরবরাহের জন্য একাধিক পদ্ধতির সমন্বয় করেছি disabled কার্যকারিতা সরবরাহ (এবং এটি ক্রস ব্রাউজারে কাজ করে)। কোডটি নীচে রয়েছে (উভয়ই ES2015 এবং আপনার পছন্দ অনুসারে কফিস্ক্রিপ্ট)।

এটি প্রতিরক্ষার একাধিক স্তর সরবরাহ করে যাতে অক্ষম হিসাবে চিহ্নিত অ্যাঙ্করগুলি আসলে এরূপ আচরণ করে। এই পদ্ধতির ব্যবহার করে, আপনি একটি নোঙ্গর পান যা আপনি পারবেন না:

• ক্লিক
• ট্যাব এবং হিট রিটার্ন
• এটিতে ট্যাবিং পরবর্তী ফোকাসযোগ্য উপাদানের দিকে ফোকাস স্থানান্তরিত করবে
• অ্যাঙ্কর পরবর্তীকালে সক্ষম করা থাকলে এটি সচেতন

---

কিভাবে

1. এই সিএসএস অন্তর্ভুক্ত করুন, কারণ এটি প্রতিরক্ষা প্রথম লাইন। এটি ধরে নিয়েছে যে আপনি নির্বাচকটি ব্যবহার করেনa.disabled

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

2. এরপরে, প্রস্তুত এই শ্রেণীর উপর ইনস্ট্যান্ট করুন (selectচ্ছিক নির্বাচনকারী সহ):

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

---

কফিসক্রিপ্ট শ্রেণি:

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

Comments

তবে আমাদের যদি একটি সরল jQuery / জাভাস্ক্রিপ্ট সমাধান প্রয়োজন? আমার উত্তর নীচে দেখুন।

— জন ক্রফোর্ড

ঠিক আছে, তবে আপনি ES2015 ক্লাসটি আমি সবে যুক্ত করেছি!

— ক্রস

Answer 4

উপাদানটি চেষ্টা করে দেখুন:

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

লিঙ্কটি অক্ষম করা ক্রোমে আমার জন্য কাজ করে: http://jsfiddle.net/KeesCBakker/LGYpz/ ।

ফায়ারফক্স খুব ভাল খেলছে বলে মনে হচ্ছে না। এই উদাহরণটি কাজ করে:

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

দ্রষ্টব্য: ভবিষ্যতে অক্ষম / সক্ষম লিঙ্কগুলির জন্য একটি 'লাইভ' বিবৃতি যুক্ত করা হয়েছে।
নোট 2: 'লাইভ' কে 'অন' এ পরিবর্তন করেছে।

Comments

নতুন উদাহরণটি ফায়ারফক্সেও কাজ করা উচিত। ;-) এটি একটি ফায়ার ফিক্স: ডি

— কিস সি বেকার

"ডকুমেন্ট প্রদর্শন করতে অস্বীকার করেছেন কারণ এক্স-ফ্রেম-বিকল্পগুলি দ্বারা প্রদর্শন নিষিদ্ধ করা হয়েছে" এর কারণে ক্রোম জেএসফিডেলে নেভিগেশনকে বাধা দেয়। দুঃখিত, যদি জিসফিল উদাহরণটি অদ্ভুত কাজ করে ;-)

— কেস সি বাকার

আমাকে অ্যাঙ্কার ট্যাগটি অক্ষম হিসাবেও দেখাতে হবে। আইই তে যেমন দেখানো হয়েছে। এটি নিষ্ক্রিয় কিনা তা ক্লিক করার জন্য ক্লিক ফাংশনটি পরিবর্তন করতে চাই না

— অঙ্কিত

শো-পার্টটি সিএসএস এবং একটি ক্লাস যুক্ত করে করা যায় যা এটি ধূসর করে তোলে। 'লাইভ' ক্লিকের সুবিধাটি হ'ল আপনি সমস্ত লিঙ্কের জন্য সমস্যার সমাধান করবেন। আমি যদি আরও সাহায্য করতে পারি তবে আমাকে জানান। আশা করি আপনি সফল হবেন।

— কিস সি বেকার

সম্পূর্ণ ক্রস ব্রাউজার সমাধানের জন্য নীচে আমার উত্তরটি চেষ্টা করে দেখুন!

— জন ক্রফোর্ড

Answer 5

বুটস্ট্র্যাপ ৪.১ একটি ক্লাসের নাম 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জেএস স্ক্রিপ্টের চেয়ে আপনার এর মতো কিছু দরকার

   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ক্লাস ব্যবহারের পরামর্শ দেয় , এক্ষেত্রে সমাধান কাজ করবে না ।

Answer 6

আমি নীচের সমাধানটি শেষ করেছি, যা কোনও বৈশিষ্ট্য <a href="..." disabled="disabled">বা শ্রেণীর সাথে কাজ করতে পারে<a href="..." class="disabled"> :

সিএসএস স্টাইল:

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

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

জাভাস্ক্রিপ্ট (jQuery প্রস্তুত):

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

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

Answer 7

আপনি, একটি লিঙ্ক অক্ষম করতে পারেনা যদি আপনি যে ক্লিক ঘটনা তারপর কেবল আগুন করা উচিত নয় চান যে লিঙ্ক থেকে।Removeaction

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

আরও তথ্যের জন্য: - উপাদানগুলি অক্ষম করা যেতে পারে

Comments

এটি লিঙ্কটি সত্যই অক্ষম করে না। অ্যাঙ্কর উপাদানটি এখনও একই ট্রিগে থাকা সত্ত্বেও ট্রিগার করবে।

— ফ্লোরিয়ান মার্জাইন

Answer 8

আমি কিছু করতে হবে

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

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

এই জাতীয় কিছু কাজ করা উচিত। আপনি অক্ষম করতে চান এমন লিঙ্কগুলির জন্য আপনি একটি শ্রেণি যুক্ত করুন এবং তারপরে কেউ তাদের ক্লিক করলে আপনি মিথ্যা প্রত্যাবর্তন করেন। তাদের সক্ষম করতে কেবল ক্লাসটি সরিয়ে ফেলুন।

Comments

এই সাহায্য করবে না। আমাকে ক্লিক ইভেন্টটি পুনরায় নিবন্ধন করতে হবে এবং ফাংশনটি ডায়নামিক যা ডাকা হয়। একবার মুছে ফেলা হলে, আমি এটি আবার সংযুক্ত করতে পারি না

— অঙ্কিত

Answer 9

টাচ ডিভাইসে অন্য পৃষ্ঠা অ্যাক্সেস করতে লিঙ্কটি অক্ষম করতে:

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

Comments

আমার উত্তরটি মোবাইলেও কাজ করে। খুব ক্রস ব্রাউজার। নিচে দেখ.

— জন ক্রফোর্ড

এটি ভুল, আপনি setAttribute('href', '');এবং পৃষ্ঠার ইউআরএল http://example.com/page/?query=somethingলিঙ্ক হলে আইই 11 এ ক্লিক করা হবে http://example.com/page/। একটি setAttribute('href', '#');

— কার্যপ্রণালী

Answer 10

রেজারে (.cshtml) আপনি এটি করতে পারেন:

@{
    var isDisabled = true;
}

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

Answer 11

আপনি এটি ব্যবহার করতে পারেন এইচটিএমএল-এ এসপ নেটওয়ারের হাইপারলিংক বা লিঙ্ক বোতামগুলিকে অক্ষম করতে।

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

Answer 12

আর একটি সম্ভাব্য উপায় আছে এবং এটি আমার পক্ষে সবচেয়ে ভাল। মূলত এটি একইভাবে লাইটবক্স পুরো পৃষ্ঠাটি অক্ষম করে, একটি ডিভ রেখে এবং জেড-ইনডেক্সের সাথে ফিডল করে। আমার একটি প্রকল্পের প্রাসঙ্গিক স্নিপেটগুলি এখানে। এটি সমস্ত ব্রাউজারে কাজ করে !!!!!

জাভাস্ক্রিপ্ট (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
    });
});

এবং এইচটিএমএলে

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

সুতরাং রেজাইজারটি অ্যাঙ্কারের (চিত্রগুলি কেবল তীরচিহ্নের) অবস্থানগুলি সন্ধান করে এবং অক্ষমকারীকে শীর্ষে রাখে। অক্ষমকারীটির চিত্রটি একটি অক্ষম ধূসর বর্গক্ষেত্র (এটি এইচটিএমএলে অক্ষমকারীদের প্রস্থ / উচ্চতাটি আপনার লিঙ্কের সাথে মিলে যায়) এটি অক্ষম করে দেখানোর জন্য। ভাসমান পৃষ্ঠাটি গতিশীলরূপে পুনরায় আকার দিতে দেয় এবং অক্ষমকারীরা উইন্ডো রিজারাইজার () এ স্যুট অনুসরণ করবে। গুগলের মাধ্যমে আপনি উপযুক্ত চিত্রগুলি খুঁজে পেতে পারেন। সরলতার জন্য প্রাসঙ্গিক সিএসএস ইনলাইন রেখেছি।

তারপরে কিছু শর্তের ভিত্তিতে,

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

Comments

নিম্নমান দেওয়া হয়নি, তবে আমার অনুমান: কোনও সাধারণ জিনিসের জন্য খুব বেশি ওভারহেড, আপনার কোড এসও-তে কোনও উত্তরের জন্য যথেষ্ট মন্তব্য করেননি। এটি অনেকটা হ্যাকিং অনুভব করছে, আমি ব্যক্তিগতভাবে এটি ব্যবহার করব না।

— এমিল বার্গারন

Answer 13

আমি মনে করি এগুলির অনেক কিছুই চিন্তাভাবনার বাইরে। আপনি যা চান তার একটি শ্রেণি যুক্ত করুন disabled_link।
তারপরে CSS এর .disabled_link { display: none }
বুম করুন এখন ব্যবহারকারী লিঙ্কটি দেখতে পাবে না যাতে এটি ক্লিক করার বিষয়ে আপনাকে চিন্তা করতে হবে না। তারা কিছু করতে হলে লিংক ক্লিক করার যোগ্য হচ্ছে সন্তুষ্ট, কেবল jQuery সঙ্গে বর্গ সরান:
$("a.disabled_link").removeClass("super_disabled")। বুম হয়েছে!

Comments

প্রশ্নটি থেকে: 'এবং আমি অক্ষম মোডে লিঙ্কটি প্রদর্শন করতে চাই' '

— মার্সেলো

হ্যাঁ, আপনি ঠিক বলেছেন। আমি সেটা মিস করেছি. সুতরাং আমি তার পরিবর্তে বলব, ডাটা- $("td a").each(function(i,v){ $(this).data('href',this.href); $(this).attr('href','#').css('color','grey'); });হ্রেফের জন্য href মানটি সরান তারপরে আপনি যখন কোনও অবিশ্বাস্য করতে চান: $(this).attr('href',$(this).data('href')).css('color','blue');

— জর্দান মাইকেল রাশিং