javascript - Leaflet GeoJSON sublayers checked not working

Good morning all,

I have been struggling with division of my geoJSON sublayers, as per the query below:

Leaflet geoJSON sublayers checked on off

I used the proposed code, which seems to bring a nice solution:

    document.querySelector("input[name=vm]").addEventListener('change',  

    function() {   //VM is a main geoJSON layer
   if(this.checked) {
if (!map.hasLayer(job2)) map.addLayer(job2);
if (!map.hasLayer(infill)) map.addLayer(infill);
if (!map.hasLayer(mdu)) map.addLayer(mdu);
if (!map.hasLayer(featurelayer2)) map.addLayer(featuresLayer2);
document.querySelector("input[name=infill]").disabled = false;
document.querySelector("input[name=mdu]").disabled = false;
document.querySelector("input[name=infill]").checked = true;
document.querySelector("input[name=mdu]").checked = true;

   }
   else {
if (map.hasLayer(job2)) map.removeLayer(job2);
if (map.hasLayer(infill)) map.removeLayer(infill);
if (map.hasLayer(mdu)) map.removeLayer(mdu);
if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2);
document.querySelector("input[name=infill]").disabled = true;
document.querySelector("input[name=mdu]").disabled = true;
document.querySelector("input[name=infill]").checked = false;
document.querySelector("input[name=mdu]").checked = false;

    }
  });

   document.querySelector("input[name=infill]").addEventListener('change', 
 function() {    // Infill is 1st geoJSON sublayer, belonging to VM layer

if(this.checked) { if (!map.hasLayer(infill)) map.addLayer(infill); if (!map.hasLayer(featurelayer)) map.addLayer(featuresLayer); } else { if (map.hasLayer(infill)) map.removeLayer(infill); if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2); } });

    document.querySelector("input[name=mdu]").addEventListener('change', 
  function() {       // Infill is 1st geoJSON sublayer, belonging to VM layer

if(this.checked) { if (!map.hasLayer(mdu)) map.addLayer(mdu); if (!map.hasLayer(featurelayer2)) map.addLayer(featuresLayer2); } else { if (map.hasLayer(mdu)) map.removeLayer(mdu); if (map.hasLayer(featuresLayer2)) map.removeLayer(featuresLayer2); } });

Unfortunately it returns not useful result. I would like to show it in the pics below: 1 - Initial map stage (layer and both sublayers visible) 2 - Main Layer switched off (works fine) 3 - Main layer switched on again (return black dots instead of orange as per to the style. Sublayers still disabled).

And now I considered it in other hand - start disable sublayers instead of the main layers: 1 - Initial map stage 2 - MDU layer switched off (unfortunately Infill is gone instead apart from these ones, gripped by geoJSOn feature) 3 - Both sublayers switched off (but MDU still visible), what should be equalled to whole GeoJSON layer disabled 4 - Infill layer disabled, MDU switched off again (returning black dots as an additional MDU layer - black dots comes from the style not customised yet).

What way whould I take to solve this problem?