Disable all fields in a Grid Container

I have an application form with several grid containers (like form sections) and each grid has about 25 fields. I don’t want to hide the grid container or the fields. The fields in the grid need to be visible for other groups to view the data but not to edit the data unless it’s granted through the JS codes. I know how to disable individual field but there would be so many fields to enable/disable.

Is it possible to disable the entire grid container similar to a datatable control?

Many Thanks for your help!

Dear @COR6603,
That's possible, but it's not a trivial task! You can get all elements on the form with the following code:

fd._vue.$refs;

Then, it can be used to check, if they are inside of a certain Grid. For example, with my-grid class:

You can check it like this:

var refs = fd._vue.$refs;
for(var ref in refs){
  if(ref.indexOf('field') >= 0 && refs[ref].$el.closest(".my-grid") != null){
    console.log(ref);
    fd.field(ref.replace('field_','')).disabled = true;
  }
}

This is exactly what I was looking for! Thank you very very much!