禁用DIV中的链接和表单输入

Question

I'm trying to find out if it is possible to disable completely all interaction - links (text or images), form inputs/buttons - for an entire DIV.

For example you have a registration form divided in 3 steps, but all displayed in the same page. Unless the first step (DIV1) requirements have been fulfilled, the whole DIV2 would be faded (ie 50%) and absolutely no elements contained within this DIV2 would be clickable.

I've seen some other questions where it was mentioned only how to disable form elements, but not plain links. Would it make sense at all to simply overlap the DIV2 with another DIV (with higher z-index and 50% opacity) which would prevent any interaction with the one underneath?

Thank you!

UPDATE: I tried going down the "overlapping mask div" route, but for some reason my script only works the first time you click on a "disabled" item. Here is the code I'm using:

$('.disabled-mask').click(function() {
$(this).remove();
$('.content-box').not(this).each(function(){
    $(this).append('<div class="disabled-mask"></div>');
    $(this.target).animate({opacity:'hide'}, slidespeed);
});

});

"disabled-mask" is a div I am placing above each "content-box" that needs to look disabled. When clicking on a disabled-mask, I am trying to hide that mask, and then append a mask on every other item. As I said, first time I click on it works fine, but after that nothing happens.

Thanks in advance for your help.

Answer 1

Setting the disabled attribute on links is non-standard and should be avoided. Creating an overlapping <div> element is probably the best solution.

Answer 2

还有两种可能：通过js / jquery将链接标签替换为另一个标签（例如span）或修改链接的点击事件处理程序（仅在客户端启用js时才有效）！