Disabling all and that are inside a div

Question

For a site I'm doing, I have a feature where a user can hide or delete his posts. When a user hides or deletes his post, I change the div's background color (to make it look like its dead). However, I'd like to disable all the <a></a> and  that are inside them as well (make them un-clickable so he can no longer use them).

How can i do something like this using jquery?

It's much like what happens when you delete your own post here on stackoverflow.com, only thing is I need all the <a></a> and  disabled. The s call a jquery function when clicked. That's why I need them disabled.

<div class="post user" id="EN001">
    <a href="/user/john">View other posts by John</a>
    <i class="icon-hide hide" data-hash="a4d8e82s8w2d2"></i> Hide your post
    <i class="icon-delete delete" data-hash="a4d8e82s8w2d2"></i> Delete your post
</div>

$('.hide,.delete').live('click', function() {
    // self. I fail here;
});

To disable a link, you might want to read this question http://stackoverflow.com/questions/970388/jquery-disable-a-link — naota, Jun 17 '14 at 13:27

score 2 · Accepted Answer · answered Jun 17 '14 at 13:22

2

Simplest and easiest way could be to show a semi-transparent overlay on the div.

Demo: http://jsfiddle.net/abhitalks/DGek7/

Relevant CSS:

div.post {
    position: relative;
}
div.disabled::before {
    content: '';
    background-color: rgba(128,128,128,0.5);
    position: absolute;
    width: 100%; height: 100%;
}

Relevant JS:

$('.hide, .delete').on('click', function() {
   $(this).parent().addClass("disabled");
});

answered Jun 17 '14 at 13:22

Abhitalks

27,721
5
58
81

Thanks for the semi-transparent trick. This is exactly what I was trying to achieve. – Norman Jun 17 '14 at 14:52

score 2 · Answer 2 · answered Jun 17 '14 at 13:38

2

A very minimal and simple solution would be to disable pointer events while adding your prefered style:

CSS:

div.disabled {
   pointer-events: none;
   cursor: default;
   opacity: 0.5;
   background: #dddddd;
}

JS:

$('.hide, .delete').on('click', function() {
   $(this).parent().addClass("disabled");
});

answered Jun 17 '14 at 13:38

frhd

9,396
5
24
41

1

This is a simpler and cleaner solution indeed. – Abhitalks Jun 17 '14 at 15:03

score 0 · Answer 3 · answered Jun 17 '14 at 13:17

You could capture any clicks inside the div and stop them from propagating

$("#EN001").click(function (ev) {
  return false; // same as ev.preventDefault() + ev.stopPropagation()
});

Or you could prevent the default behavior on links (you will have to find a different way to disable the "i" elements, maybe add a "disabled" class and check for it on the other event handler

$("#EN001").on("click","a",function (ev) {
  ev.preventDefault();
});

Disabling all and that are inside a div

3 Answers3