CODEWITHSUNDEEP
javascriptjquery
Suman KC
Suman KC

Reputation: 3528

disable an element completely including links calling other javascript functions on click action

<li class=" active">
<input class="check-shopby" type="checkbox" onclick="$(this).next().click()" checked="checked">
    <a class="checked" href="http://mysite/~dev433/products//cooking/cook-tops.html" onclick="$(this).previous().checked = false;" style="cursor: pointer;">
        <img width="150" alt="" src="site/media/wysiwyg/attribute_Sets_images/Fagor-CE9-20-1.jpg">
        <span> Electricity (74) </span>
    </a>
    <a onclick="otherjavascriptfunction" href="/somewhere">link</a>
</li>

Ok, this is my content inside a li item, when i go under certain condition i want it(the li item itself and all other clickable items inside) to be completely unclickable, if even possible some non-clickable(disabled) sign.

This is what i tried but it replaces my content, $("div li a").replaceWith(function() { return $(this).text(); });

Upvotes: 2

Views: 47

Answers (2)

Nermin
Nermin

Reputation: 6100

You can add clickEventListener that will be listening on li element in captureMode

If true, useCapture indicates that the user wishes to initiate capture. After initiating capture, all events of the specified type will be dispatched to the registered listener before being dispatched to any EventTargets beneath it in the DOM tree. Events which are bubbling upward through the tree will not trigger a listener designated to use capture.

var disableClicks = document.getElementsByClassName("disable-inner-clicks");
disableClicks.forEach(function(element){
   element.addEventListener('click', function(e){
      e.preventDefault();
      e.stopPropagation();
   }, true);
});

Then for any element you want to disable clicks, just add class = disable-inner-clicks

<li class="active disable-inner-clicks">
  ....
</li>

No matter what content inside, clicks are disabled, and when your condition is fulfilled you just add the class to the element

Upvotes: 2

schellingerht
schellingerht

Reputation: 5796

Simple solution. Set all children disabled and remove the click event.

$('li.active *').prop('disabled', true).off('click');

Upvotes: 1

Related Questions