title: Manipulating node parent children behaviour on the basis of checkbox
body: <p>I am working on an angular application with d3 js. I have jsFiddle below</p>
  <p><a href="https://jsfiddle.net/ksc3pxh9/1/" rel="nofollow noreferrer">https://jsfiddle.net/ksc3pxh9/1/</a></p>
  <p>In my code for each node I have a checkbox as shown in fiddle. Code for checkbox is as follows</p>
  <pre><code>         nodeEnter.append('foreignObject').attr('width', '20')
      .attr(&quot;x&quot;, 200 / 2)
      .attr(&quot;y&quot;, 1)
      .attr('height', '20').append('xhtml:input')
      .attr('type', 'checkbox')
      .attr(&quot;id&quot;, &quot;checkbox&quot;)
      .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;,function(d) {
         d3.event.stopPropagation();
       console.log(d);
      })
  </code></pre>
  <p>For check boxes I want to check and uncheck checkboxes on the basis of some conditions/relations, which are as follows.</p>
  <ol>
  <li><p>If user checks parent checkbox, then checkboxes for childrens also should be checked and disabled. Means if parents is checked then childrens are also automatically should be checked and user should not be able to uncheck childrens in this case. if we uncheck the parent then automatically all children becomes uncheck and enable</p>
  </li>
  <li><p>If user checks any children then it's siblings and parent will be unchecked and enabled. Means user can make siblings/parent checked at any point. In this is if parent is checked then I should behave like point 1</p>
  </li>
  </ol>
  <p>How can I implement this?</p>