title: D3 Tree: How to make children checked and disabled recursively when the parent node is checked
body: <p>I am working on an angular application with d3. My code is as follows.</p>
  <pre class="lang-js prettyprint-override"><code>var treeData = [{
    &quot;name&quot;: &quot;MD&quot;,
    &quot;children&quot;: [{
      &quot;name&quot;: &quot;Professional&quot;,
      &quot;children&quot;: [{
        &quot;name&quot;: &quot;Third A&quot;,
        &quot;children&quot;: [{
          &quot;name&quot;: &quot;Fourth A&quot;,
          &quot;children&quot;: [{
            &quot;name&quot;: &quot;Fifth A&quot;
          }, {
            &quot;name&quot;: &quot;Fifth B&quot;
          }, {
            &quot;name&quot;: &quot;Fifth C&quot;
          }, {
            &quot;name&quot;: &quot;Fifth D&quot;
          }]
        }, {
          &quot;name&quot;: &quot;Fourth B&quot;
        }, {
          &quot;name&quot;: &quot;Fourth C&quot;
        }, {
          &quot;name&quot;: &quot;Fourth D&quot;
        }]
      }, {
        &quot;name&quot;: &quot;Third B&quot;
      }]
    }, {
      &quot;name&quot;: &quot;Leader&quot;,
      &quot;children&quot;: [{
        &quot;name&quot;: &quot;Third C&quot;
      }, {
        &quot;name&quot;: &quot;Third D&quot;
      }]
    }, {
      &quot;name&quot;: &quot;Advocate&quot;,
      &quot;children&quot;: [{
        &quot;name&quot;: &quot;Third E&quot;
      }, {
        &quot;name&quot;: &quot;Third F&quot;
      }]
    }, {
      &quot;name&quot;: &quot;Clinician&quot;,
      &quot;children&quot;: [{
        &quot;name&quot;: &quot;Third G&quot;
      }, {
        &quot;name&quot;: &quot;Third H&quot;
      }, ]
    }, ]
  }];
  
  
  
  var colourScale = d3.scale.ordinal()
    .domain([&quot;MD&quot;, &quot;Professional&quot;, &quot;Leader&quot;, &quot;Advocate&quot;, &quot;Clinician&quot;])
    .range([&quot;#6695c8&quot;, &quot;#cd3838&quot;, &quot;#d48440&quot;, &quot;#a8ba5f&quot;, &quot;#63b7c0&quot;]);
  
  
  // ************** Generate the tree diagram  *****************
  var margin = {
      top: 20,
      right: 120,
      bottom: 20,
      left: 120
    },
    width = 1200 - margin.right - margin.left,
    height = 650 - margin.top - margin.bottom;
  
  var i = 0,
    duration = 750,
    root;
  
  var tree = d3.layout.tree()
    .size([height, width]);
  
  var diagonal = d3.svg.diagonal()
    .projection(function(d) {
      return [d.y, d.x];
    });
  
  
  var svg = d3.select(&quot;body&quot;).append(&quot;svg&quot;)
    .attr(&quot;width&quot;, width + margin.right + margin.left)
    .attr(&quot;height&quot;, height + margin.top + margin.bottom)
    .append(&quot;g&quot;)
    .attr(&quot;transform&quot;, &quot;translate(&quot; + margin.left + &quot;,&quot; + margin.top + &quot;)&quot;);
  
  root = treeData[0];
  root.x0 = height / 2;
  root.y0 = 0;
  
  update(root);
  
  d3.select(self.frameElement).style(&quot;height&quot;, &quot;500px&quot;);
  
  
  // Collapse after the second level
  root.children.forEach(collapse);
  
  update(root);
  
  
  
  // Collapse the node and all it's children
  function collapse(d) {
    if (d.children) {
      d._children = d.children
      d._children.forEach(collapse)
      d.children = null
    }
  }
  
  function update(source) {
    console.log('UPDATE')
  
    // Compute the new tree layout.
    var nodes = tree.nodes(root).reverse(),
      links = tree.links(nodes);
  
  
  
    // Normalize for fixed-depth.
    nodes.forEach(function(d) {
      d.y = d.depth * 200;
    });
  
    // Update the nodes…
    var node = svg.selectAll(&quot;g.node&quot;)
      .data(nodes, function(d) {
        return d.id || (d.id = ++i);
      });
  
    // Enter any new nodes at the parent's previous position.
    var nodeEnter = node.enter().append(&quot;g&quot;)
      .attr(&quot;class&quot;, &quot;node&quot;)
      .attr(&quot;transform&quot;, function(d) {
        return &quot;translate(&quot; + source.y0 + &quot;,&quot; + source.x0 + &quot;)&quot;;
      })
      .on(&quot;click&quot;, click);
  
    nodeEnter.append(&quot;circle&quot;)
      .attr(&quot;r&quot;, 1e-6)
      .style(&quot;fill&quot;, function(d) {
        return d._children ? &quot;#C0C0C0&quot; : &quot;#fff&quot;;
      });
  
    nodeEnter.append(&quot;text&quot;)
      .attr(&quot;x&quot;, function(d) {
        return d.children || d._children ? -13 : 13;
      })
      .attr(&quot;dy&quot;, &quot;.35em&quot;)
      .attr(&quot;text-anchor&quot;, function(d) {
        return d.children || d._children ? &quot;end&quot; : &quot;start&quot;;
      })
      .text(function(d) {
        return d.name;
      })
      .style(&quot;fill-opacity&quot;, 1e-6);
      
               nodeEnter.append('foreignObject').attr('width', '20')
          .attr(&quot;x&quot;, 10)
          .attr(&quot;y&quot;, 1)
          .attr('height', '20').append('xhtml:input')
          .attr('type', 'checkbox')
          .attr(&quot;id&quot;, d =&gt; `checkbox-${d.id}`)
          //.attr(&quot;fill&quot;,&quot;none&quot;)
          //.style(&quot;opacity&quot;,&quot;1&quot;)
          // An on click function for the checkboxes
          .on(&quot;click&quot;, d =&gt; {
             if (d.children) {
               d.children.forEach(child =&gt; {
                 const cb = d3.select(`#checkbox-${child.id}`);
                 //console.log('CB: ', cb.node());
                 cb.node().checked = d3.event.target.checked;
                 cb.attr('disabled', d3.event.target.checked ? true : null);
               })
             }
             else {
               if (d3.event.target.checked) {
                 d.parent.children.forEach(child =&gt; {
               console.log('CID: ', child.id, d.id);
                 if (child.id !== d.id) {
  const cb = d3.select(`#checkbox-${child.id}`);
  console.log('CB: ', cb.node())
  cb.node().checked = false;               
                 
                 } 
                 
                   
                 
                 });
             }
             }
             d3.event.stopPropagation();
           //console.log(d);
           //console.log(d3.event.target.checked);
          })
  
    // Transition nodes to their new position.
    var nodeUpdate = node.transition()
      .duration(duration)
      .attr(&quot;transform&quot;, function(d) {
        return &quot;translate(&quot; + d.y + &quot;,&quot; + d.x + &quot;)&quot;;
      });
  
    nodeUpdate.select(&quot;circle&quot;)
      .attr(&quot;r&quot;, 10)
      .attr(&quot;fill-opacity&quot;, &quot;0.7&quot;)
      .attr(&quot;stroke-opacity&quot;, &quot;1&quot;)
      .style(&quot;fill&quot;, function(d) {
          return (typeof d._children !== 'undefined') ? (colourScale(findParent(d))) : '#FFF';
      })
      .style(&quot;stroke&quot;, function(d) {
        return colourScale(findParent(d));
      });
      
    
  
    nodeUpdate.select(&quot;text&quot;)
      .style(&quot;fill-opacity&quot;, 1);
  
    // Transition exiting nodes to the parent's new position.
    var nodeExit = node.exit().transition()
      .duration(duration)
      .attr(&quot;transform&quot;, function(d) {
        return &quot;translate(&quot; + source.y + &quot;,&quot; + source.x + &quot;)&quot;;
      })
      .remove();
  
    nodeExit.select(&quot;circle&quot;)
      .attr(&quot;r&quot;, 1e-6);
  
    nodeExit.select(&quot;text&quot;)
      .style(&quot;fill-opacity&quot;, 1e-6);
  
    // Update the links…
    var link = svg.selectAll(&quot;path.link&quot;)
      .data(links, function(d) {
        return d.target.id;
      });
  
    // Enter any new links at the parent's previous position.
    link.enter().insert(&quot;path&quot;, &quot;g&quot;)
      .attr(&quot;class&quot;, &quot;link&quot;)
      .attr(&quot;stroke-width&quot;, function(d) {
        return 1;
      })
      .attr(&quot;d&quot;, function(d) {
        var o = {
          x: source.x0,
          y: source.y0
        };
        return diagonal({
          source: o,
          target: o
        });
      })
      .attr(&quot;opacity&quot;, &quot;0.3&quot;)
      .style(&quot;stroke&quot;, function(d) {
        return colourScale(findParentLinks(d));
      });
  
    // Transition links to their new position.
    link.transition()
      .duration(duration)
      .attr(&quot;d&quot;, diagonal);
  
    // Transition exiting nodes to the parent's new position.
    link.exit().transition()
      .duration(duration)
      .attr(&quot;d&quot;, function(d) {
        var o = {
          x: source.x,
          y: source.y
        };
        return diagonal({
          source: o,
          target: o
        });
      })
      .remove();
  
    // Stash the old positions for transition.
    nodes.forEach(function(d) {
      d.x0 = d.x;
      d.y0 = d.y;
    });
  }
  
  function findParent(datum) {
    if (datum.depth &lt; 2) {
      return datum.name
    } else {
      return findParent(datum.parent)
    }
  }
  
  function findParentLinks(datum) {
    if (datum.target.depth &lt; 2) {
      return datum.target.name
    } else {
      return findParent(datum.target.parent)
    }
  }
  
  
  // Toggle children on click.
  function click(d) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
    }
    update(d);
  }
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>.node {
    cursor: pointer;
  }
  
  .node circle {
    fill: #fff;
    stroke: #C0C0C0;
    stroke-width: 1.5px;
  }
  
  .node text {
    font: 10px sans-serif;
  }
  
  .link {
    fill: none;
    stroke: #C0C0C0;
    stroke-width: 1.5px;
  }
  </code></pre>
  <p>I am facing following problem:</p>
  <p>If a collapsed node has children, and its parent is getting checked, the node itself is checked as well, but its children cannot be checked because they are not visible.
  The checking should work recursively: if a node is checked, all its descendants should be checked and disabled as well regardless their state (expanded or collapsed).</p>
  <p>How can I do this?</p>