Is there a way to make FeatureGroup or LayerGroup un-clickable in Leaflet?

Question

I have a FeatureGroup that serves as a container for imageOverlays. Normally a popup opens when one of the image overlays is clicked. Now at some times I don't want this to happen, and I can't figure out how to set the Group or the objects within temporaily to noninteractive.

I tried this function

L.Layer.prototype.setInteractive = function (interactive) {
    if (this.getLayers) {
        this.getLayers().forEach(layer => {
            layer.setInteractive(interactive);
        });
        return;
    }
    if (!this._path) {
        return;
    }
    this.options.interactive = interactive;
    if (interactive) {
        L.DomUtil.addClass(this._path, 'leaflet-interactive');
    } else {
        L.DomUtil.removeClass(this._path, 'leaflet-interactive');
    }
};

found here: https://github.com/Leaflet/Leaflet/issues/5442

and then

overlayGroup.eachLayer(function(layer){                                                             
    layer.setInteractive(false);
});

but to no avail. I can still click them and the popups open. Logging the Group to console shows me this:

but there's too much going on for someone still new to JS to make much sense of it. At some level interactive seems to be set to true while on another to false, but where exactly and what to do with this information... well, that's where I need your help!

Or am I on the completely wrong path and there's a way simpler method to prevent popup of this group to open?

UPDATE: I tried the version from @seth-lutske but it's still not working. I added some simple console logs to see what's happening:

L.Layer.include({

    setInteractive: function (interactive) {
        console.log("set");
       if (this.getLayers) {
          this.getLayers().forEach(layer => {
            console.log("loop");
             layer.setInteractive(interactive);
          });
          return;
       }
 
       if (interactive) {
        console.log("isinteractive");
        L.DomUtil.addClass(this.getElement(), 'leaflet-interactive');

       } else {
        console.log("notinteractive");
          L.DomUtil.removeClass(this.getElement(), 'leaflet-interactive');
       }
 
   }
 
 })

Now when I do group.setInteractive(false); it never goes into the 'isinteractive' part of the if clause:

so in order to figure out where the problem is, have some more code of how I construct the group and call the function:

   function addAllDetailMaps(detailMaps){
        detailMaps.forEach(function (item) {
            var detailMapBounds = JSON.parse(decodeURIComponent(item.detail_map_bounds));   //the bounds are stored as an encoded string - here we have to revert it
            createDetailMap(item.detail_map_name, detailMapBounds, item.detail_map_start_zoom, item.detail_map_end_zoom);
        });
    }

    //creates one detail map image overlay
    function createDetailMap(name, detailMapBounds, startZoom, endZoom){
        window['detailMap'+name] = L.imageOverlay(mapPath+'detail-maps/'+name+'/'+name+'.png?rand='+simpleRandom(), [detailMapBounds._northEast, detailMapBounds._southWest], {
           interactive: true                       
        }).bindPopup(detailMapPopup(name, detailMapBounds, startZoom, endZoom)).addTo(map).addTo(detailMapsGroup); 
    }

In the popup is a button to edit the shape of the image. For this I replace it with distortableImageOverlay and want to prohibit clicks on any other image while this is going on.

function editDetailMapShape(){
    bounds = $("#detail_map_bounds").val();                                                                     //get the stringyfiedBounds from the hidden popup form input field - because handing it over in the onclick function does not work
    name = $("#detail_map_name").val();                                                                         //same here for the detail map name
    map.closePopup();                                                                                           //close the popup because we want to interact with the image below
    map.removeLayer(window['detailMap'+name]);
    detailMapsGroup.setInteractive(false);
    tmpImg =  L.distortableImageOverlay(mapPath+'detail-maps/'+name+'/'+name+'.png?rand='+simpleRandom(), {
        corners: getCornersFromBounds(JSON.parse(decodeURIComponent(bounds))),
        editable: true,
        mode: 'drag',
        actions: [L.DragAction, L.ScaleAction, L.RestoreAction, L.LockAction],
    }).addTo(map);
}

Answer 1

You were pretty dang close. When we want to extend or alter prototypes in leaflet, we use the .extend and .include functions on the prototype class itself. So you'd want to do this:

L.Layer.include({

   setInteractive: function (interactive) {

      if (this.getLayers) {
         this.getLayers().forEach(layer => {
            layer.setInteractive(interactive);
         });
         return;
      }

      if (interactive) {
         L.DomUtil.addClass(this.getElement(), 'leaflet-interactive');
      } else {
         L.DomUtil.removeClass(this.getElement(), 'leaflet-interactive');
      }

  }

})

Note this only works for elements that have a getElement() method. It may need to be adjusted for path type objects, but this should work for your image overlays and markers.

Working codesandbox