Multi check box with multiple radio buttons in angular2?

Question

I have a checkbox (a).that checkbox having more two dependency checkbox(b and c) . With the each checkbox I have 4 radio button respectively in disable state. If I check a, then b and c respectively going to be checked and with that , the radio radio buttons of all checked checkboxes should be enable.

I have completed the checkbox checked section but I am getting problem with enable and disable section of radio buttons.

My Json is like

public permissionList =   
 [
    {
    "catagoryname": "Business Settings",
    "permission": [
      {
      "permissionname": "Create",
      "ischecked": false,
      "permissionid": 2,
      "depedency": [{
        "depedencyId": 1
      }, {
        "depedencyId": 3
      }],
      "relation": {
        "isActive":true,
        "other": false
      }
    },
      {
      "permissionname": "Edit",
      "ischecked": false,
      "permissionid": 3,
      "depedency": [{
        "depedencyId": 1
      }],
      "relation": {
        "isActive":true,
        "other": false
      }
  },
       {
      "permissionname": "Delete",
      "ischecked": false,
      "permissionid": 4,
      "depedency": [{
        "depedencyId": 1
      }],
        "relation": {
          "isActive":true,
          "other": false
        }
      },
      {
      "permissionname": "View",
      "ischecked": false,
      "permissionid": 1,
        "relation": {
          "isActive":true,
          "other": false
        }
      }]
  },
  {
    "catagoryname": "Panic Settings",
    "permission": [
      {
      "permissionname": "Create Panic",
      "ischecked": false,
      "permissionid": 6,
      "depedency": [{
        "depedencyId": 7
      }, {
        "depedencyId": 5
      }],
        "relation": {
          "isActive":true,
          "other": false
        }
      },
      {
      "permissionname": "Edit Panic",
      "ischecked": false,
      "permissionid": 7,
      "depedency": [{
        "depedencyId": 5
      }],
        "relation": {
          "isActive":true,
          "other": false
         }
      },
      {
      "permissionname": "Delete Panic",
      "ischecked": false,
      "permissionid": 8,
      "depedency": [{
        "depedencyId": 5
      }],
        "relation": {
          "isActive":true,
          "other": false
        }
      },
      {
      "permissionname": "View Panic",
      "ischecked": false,
      "permissionid": 5,
        "relation": {
          "isActive":true,
          "other": false
        }
      }]
  }];

and my view and remaing code you can see the plunker .

As I am new to angular 2 , I am not understanding what should I do in this case.Please help me to overcome from this problem.

Answer 1

use [disabled] to controll whether the radio buttons should be disabled or not.

I have add it to the plunker , check it.