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

Question

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

when i go under certain condition - What condition and when this will be checked? — Guruprasad J Rao
– Guruprasad J Rao, Commented Aug 21, 2015 at 7:51
condition is i'm counting all the checkboxes. on remaining last item i don't allow user to click the last item. — Suman KC
– Suman KC, Commented Aug 21, 2015 at 7:53
Provide the whole event if possible as I said when you want to check this condition? — Guruprasad J Rao
– Guruprasad J Rao, Commented Aug 21, 2015 at 7:54
You can use pointer-events: none; on all link elements and to disable whole li, add a class to li with some opacity. — Patel
– Patel, Commented Aug 21, 2015 at 7:54

Nermin · Accepted Answer · 2015-08-21 07:59:03Z

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

schellingerht · Accepted Answer · 2015-08-21 07:56:00Z

1

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

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

answered Aug 21, 2015 at 7:56

schellingerht

5,8062 gold badges30 silver badges56 bronze badges

1 Comment

Suman KC Over a year ago

didn't seem working here, rather than this @patel comment above pointer-events: none; looks working for now

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related