When it comes to the disabled attribute, it's important to note that it only applies to a specific set of form elements. Typically, you'll find it used with input, button, select, and textarea.
$('.main-wrapper').find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true);
});
In addition, another way to restrict user interaction is by placing an overlay div over your main wrapper. This prevents users from selecting or interacting with elements within the wrapper. Simply add a div in your HTML and then use the following JavaScript and CSS:
JavaScript
var mainWrapper = $('.main-wrapper')
mainWrapper.find('input, textarea, button, select').each(function () {
$(this).prop('disabled', true);
});
var mainWrapperPos = mainWrapper.position();
var mainWrapperHeight = mainWrapper.height();
var mainWrapperWidth = mainWrapper.width();
$('#cover').css({
'opacity': 0.3,
'top': mainWrapperPos.top,
'left': mainWrapperPos.left,
'height': mainWrapperHeight,
'width': $('.main-wrapper').width()
});
CSS
#cover {
position: absolute;
}
Hint: To further prevent tabbed selection, ensure you implement both the iteration for disabling elements and the overlay technique. For anchor elements (<a>), setting the href to # can also restrict unintended usage.
Check out this jsFiddle example