Leaflet GeoJSON sublayers checked not working

I have been struggling with division of my geoJSON sublayers, as per
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).

How do I solve this problem?