Disable links and form inputs inside a DIV

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 (i.e. 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.

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

Two other possibilities would be: Replacing the link tags via js/jquery with another tag (eg. span) or modify the on click event handler for the links (which will only work if js is enabled on the client side)!