wecuro_blog/application/modules/groups/views/add_new_permission.php

<!--sidebar end-->
<!--main content start-->
<style>

* { margin: 0; padding: 0; }

#page-wrap {
  margin: auto 0;
}

.treeview {
  margin: 10px 0 0 20px;
}

ul { 
  list-style: none;
}

.treeview li {
  background: url(http://jquery.bassistance.de/treeview/images/treeview-default-line.gif) 0 0 no-repeat;
  padding: 2px 0 2px 16px;
}

.treeview > li:first-child > label {
  /* style for the root element - IE8 supports :first-child
  but not :last-child ..... */
  
}

.treeview li.last {
  background-position: 0 -1766px;
}

.treeview li > input {
  height: 16px;
  width: 16px;
  /* hide the inputs but keep them in the layout with events (use opacity) */
  opacity: 0;
  filter: alpha(opacity=0); /* internet explorer */ 
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
}

.treeview li > label {
  background: url(https://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
  /* move left to cover the original checkbox area */
  margin-left: -20px;
  /* pad the text to make room for image */
  padding-left: 20px;
}

/* Unchecked styles */

.treeview .custom-unchecked {
  background-position: 0 -1px;
}
.treeview .custom-unchecked:hover {
  background-position: 0 -21px;
}

/* Checked styles */

.treeview .custom-checked { 
  background-position: 0 -81px;
}
.treeview .custom-checked:hover { 
  background-position: 0 -101px; 
}

/* Indeterminate styles */

.treeview .custom-indeterminate { 
  background-position: 0 -141px; 
}
.treeview .custom-indeterminate:hover { 
  background-position: 0 -121px; 
}
</style>

<section id="main-content">
    <section class="wrapper site-min-height">
        <!-- page start-->
        <section class="col-md-12 row">
            <header class="panel-heading">
                <?php
                if (!empty($group->id))
                    echo 'Manage '.$group->name.' Group Permission';
                    //echo lang('edit_doctor');
                ?>
            </header> 
            <div class="panel-body">
                <div class="adv-table editable-table ">
                    <div class="clearfix">
                        <div class="col-lg-12">
                            <div class="col-lg-3"></div>
                            <div class="col-lg-6">
                                <?php //echo validation_errors(); ?>
                                <?php echo $this->session->flashdata('feedback'); ?>
                            </div>
                            <div class="col-lg-3"></div>
                        </div>
                        <form role="form" action="groups/addNewPermission" method="post" enctype="multipart/form-data">
                           <!-- <div class="col-lg-12">
                            <?php foreach ($group_permission as $p) { ?>
                                <div class="col-lg-4">                                
                                    <div class="form-check">
                                    <input class="form-check-input" name="name[]" type="checkbox" value="<?php echo $p->id ;?>" id="<?php echo $p->id ;?>" 
                                        <?php if($p->checked) echo 'checked'; ?> 
                                    >
                                    <label class="form-check-label" for="<?php echo $p->id ;?>">
                                        <?php echo $p->name ;?>
                                    </label>
                                    </div>
                                </div>
                                
                            <?php } ?>
                            </div> --> 
                            
                        <div class="col-lg-12">
                            <?php foreach ($group_permission as $p) { ?>
                             <ul class="treeview">                                
                                <li class="last">
                                    <input type="checkbox" name="name[]"  value="<?php echo $p->id ;?>" id="<?php echo $p->id ;?>" <?php if($p->checked) echo 'checked'; ?> >
                                    <label for="<?php echo $p->id ;?>" <?php if($p->checked) echo 'class="custom-checked"'; else echo 'class="custom-unchecked"' ?>>
                                        <?php echo $p->name ;?></label>
                                    <?php if(isset($p->child)){ ?>
                                    <ul>
                                        <?php foreach ($p->child as $cp) { ?>
                                         <li>
                                             <input type="checkbox" name="name[]" value="<?php echo $cp->id ;?>" id="<?php echo $cp->id ;?>" <?php if($cp->checked) echo 'checked'; ?>>
                                             <label for="<?php echo $cp->id ;?>" <?php if($cp->checked) echo 'class="custom-checked"'; else echo 'class="custom-unchecked"' ?>><?php echo $cp->name ;?></label>
                                         </li>                                        
                                     <?php } ?>
                                    </ul>
                                <?php } ?>
                                </li>
                            </ul>
                            <?php } ?>
                        </div>
                        <input type="hidden" name="id" value='<?php
                            if (!empty($group->id)) {
                                echo $group->id;
                            }
                            ?>'>
                            <button type="submit" name="submit" class="btn btn-info"><?php echo lang('submit'); ?></button>
                        </form>
                    </div>
                </div>
            </div>
        </section>
        <!-- page end-->
    </section>
</section>

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script>
$(function() {
  $('input[type="checkbox"]').change(checkboxChanged);

  function checkboxChanged() {
    var $this = $(this),
        checked = $this.prop("checked"),
        container = $this.parent(),
        siblings = container.siblings();

    container.find('input[type="checkbox"]')
    .prop({
        indeterminate: false,
        checked: checked
    })
    .siblings('label')
    .removeClass('custom-checked custom-unchecked custom-indeterminate')
    .addClass(checked ? 'custom-checked' : 'custom-unchecked');

    checkSiblings(container, checked);
  }

  function checkSiblings($el, checked) {
    var parent = $el.parent().parent(),
        all = true,
        indeterminate = false;

    $el.siblings().each(function() {
      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
    });

    if (all && checked) {
      parent.children('input[type="checkbox"]')
      .prop({
          indeterminate: false,
          checked: checked
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(checked ? 'custom-checked' : 'custom-unchecked');

      checkSiblings(parent, checked);
    } 
    else if (all && !checked) {
      indeterminate = parent.find('input[type="checkbox"]:checked').length > 0;

      parent.children('input[type="checkbox"]')
      .prop("checked", checked)
      .prop("indeterminate", indeterminate)
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));

      checkSiblings(parent, checked);
    } 
    else {
      $el.parents("li").children('input[type="checkbox"]')
      .prop({
          indeterminate: true,
          checked: false
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass('custom-indeterminate');
    }
  }
});
</script>   
  
<!--main content end-->
<!--footer start-->