Multiche ckboxes

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
          
   
      acl2: {"carpet_design":{
        		  "title":"Manage Carpet Designs",
              "create":{"title":"Create","allowed":0},
        			"read":{"title":"View","allowed":1},
        			"update":{"title":"Edit","allowed":0},
      				"delete":{"title":"Delete","allowed":0},
        
        		"columns":{
          		"design_collection":{"title":"Design Collection","allowed":1}, 
          		"status":{"title":"Status","allowed":1}
        }}},

     actions: {
 updateAllCheckValue(key, obj, event, c, f, g){
            this.recursiveObjItr(obj, event);
        },
        updateCheckValue: function (action, key, value, nested) {
            if (typeof nested === 'object') {
                if (value[action]['allowed'] === 1) {
                    Ember.set(value[action], 'allowed', 0);
                } else {
                    Ember.set(value[action], 'allowed', 1);
                }
            }
        },
     },
  
  
  recursiveObjItr(obj, event){
        for (var k in obj) {
            if (typeof obj[k] === "object" && obj[k] !== null) {
                this.recursiveObjItr(obj[k], event);
            }
            else {
                if (obj.hasOwnProperty('allowed')) {
                    if (event.target.checked === true) {
                        console.log(`%c acl update to ${event.target.checked}`, 'background:#254;color:white;');
                        Ember.set(obj, 'allowed' , 1);
                        // obj['allowed'] = 1;
                    } else {
                        console.log(`%c acl update to ${event.target.checked}`, 'background:#254;color:yellow;');
                        Ember.set(obj, 'allowed' , 0);

                        // obj['allowed'] = 0;
                    }
                }
            }
        }
    },
});

helpers.is-equal.js

import Ember from 'ember';


export function isEqual([leftSide, rightSide]/*, hash*/) {
  return leftSide === rightSide;
}


export default Ember.Helper.helper(isEqual);

templates.application.hbs

{{acl2.carpet_design.title}}<br>

Read {{acl2.carpet_design.read.allowed}} {{input type="checkbox" checked=acl2.carpet_design.read.allowed}}<br>

{{input type="checkbox" checked=acl2.carpet_design.read.allowed}}

<br>
{{#each-in acl2 as |key value|}}

    <div class="row">
        <h1> {{value.title}} </h1>
        <div style="float: left;">
            <input id="{{concat key '_selectall_' uniqueID }}"
                   onchange={{ action 'updateAllCheckValue' key value}} type="checkbox"
                   checked="{{temp}}"/>
        </div>
        <label for="{{concat key '_selectall' uniqueID }}" style="display: inline;">Check / Uncheck All</label>
    </div>


    <div class="row">
    {{#each-in value.read as |k v|}}
        {{#if (isEqual k 'allowed')}}
            <div style="float: left;">
                {{input
                type="checkbox" id=(concat key '_read_' uniqueID)
                onchange=( action 'updateCheckValue' 'read' key value )
                checked=v}}

                <input id="{{concat key '_read_' uniqueID }}"
                        onchange={{ action 'updateCheckValue' 'read' key value }} type="checkbox"
                       checked={{v}}/>
            </div>
        {{else if (isEqual k 'title')}}
            <label style="display: inline;"
                   for="{{concat key '_read_' uniqueID }}">{{v}}</label>
        {{/if}}
    {{/each-in}}
    </div>
{{/each-in}}



             
                  
                {{input 
                         type="checkbox"
                       checked=acl2.carpet_design.read.allowed}}
                       
                  
                        
                {{input 
                         type="checkbox"
                       checked=acl2.carpet_design.read.allowed}}
                       
                  
                        
                {{input
                         type="checkbox"
                       checked=acl2.carpet_design.read.allowed}}
                       
                  
                        
                {{input 
                         type="checkbox"
                       checked=acl2.carpet_design.read.allowed}}
                       

twiddle.json

{
  "version": "0.10.4",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}