"Disabling" an HTML table with Javascript

Question

I've seen this done in a lot of sites recently, but can't seem to track one down. Essentially I want to "disable" an entire panel (that's in the form on an HTML table) when a button is clicked.

By disable I mean I don't want the form elements within the table to be usable and I want the table to sort of fade out.

I've been able to accomplish this by putting a "veil" over the table with an absolutely positioned div that has a white background with a low opacity (so you can see the table behind it, but can't click anything because the div is in front of it). This also adds the faded effect that I want. However, when I set the height of the veil to 100% it only goes to the size of my screen (not including the scrolling), so if a user scrolls up or down, they see the edge of the veil and that's not pretty.

I'm assuming this is typically done in a different fashion. Does anyone have some suggestions as a better way to accomplish this?

Answer 1

Disabling the inner elements of an HTML table can also be done using pointer-events CSS style as shown below:

table[disabled], table[disabled] input { pointer-events: none }

At any desired point in our JavaScript code, we can add disabled attribute to the parent table which will bring the CSS styling into effect:

let gameTable = document.getElementById('gameBoard');
gameTable.setAttribute('disabled', true);

Answer 2

Another way to do it would be using the opacity property.

function disablePanel(id) {
   var panel = document.getElementById(id);
   var inputs = panel.querySelectorAll('input, button'); //anything else can go in here
   for (var i=0; i<inputs.length; i++) {
      inputs[i].disabled = true;
   }

   panel.style.opacity = 0.3; //or any other value
}