Light-Year-Admin-Using-Iframe-v4
/
lyear_pages_rabc.html

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<title>设置权限 - 光年(Light Year Admin V4)后台管理系统模板</title>
<link rel="icon" href="favicon.ico" type="image/ico">
<meta name="keywords" content="LightYear,LightYearAdmin,光年,后台模板,后台管理系统,光年HTML模板">
<meta name="description" content="Light Year Admin V4是一个后台管理系统的HTML模板，基于Bootstrap v4.4.1。">
<meta name="author" content="yinqi">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/materialdesignicons.min.css" rel="stylesheet">
<link href="css/style.min.css" rel="stylesheet">
</head>

<body>
<div class="container-fluid p-t-15">

  <div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header"><div class="card-title">设置权限</div></header>
        <div class="card-body">

          <form action="#!" method="post">
            <div class="form-group">
              <label for="example-text-input">角色名称</label>
              <input class="form-control" type="text" name="role-input" placeholder="角色名称">
            </div>
            <div class="table-responsive">
              <table class="table table-striped">
                <thead>
                  <tr>
                    <th>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="check-all">
                        <label class="custom-control-label" for="check-all">全选</label>
                      </div>
                    </th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-parent" id="roleid-1" dataid="id-1" value="1">
                        <label class="custom-control-label" for="roleid-1">系统管理</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-20">
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-parent checkbox-child" id="roleid-1-5" dataid="id-1-5" value="5">
                        <label class="custom-control-label" for="roleid-1-5">网站设置</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-20">
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-6" dataid="id-1-6" value="6">
                        <label class="custom-control-label" for="roleid-1-6">配置管理</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-40">
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-6-20" dataid="id-1-6-20" value="20">
                        <label class="custom-control-label" for="roleid-1-6-20">添加配置</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-6-21" dataid="id-1-6-21" value="21">
                        <label class="custom-control-label" for="roleid-1-6-21">编辑配置</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-6-44" dataid="id-1-6-44" value="44">
                        <label class="custom-control-label" for="roleid-1-6-44">删除配置</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-6-45" dataid="id-1-6-45" value="45">
                        <label class="custom-control-label" for="roleid-1-6-45">禁用/启用配置</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-6-46" dataid="id-1-6-46" value="46">
                        <label class="custom-control-label" for="roleid-1-6-46">设置配置值</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-20">
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-parent checkbox-child" id="roleid-1-7" dataid="id-1-7" value="7">
                        <label class="custom-control-label" for="roleid-1-7">导航管理</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-40">
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-7-51" dataid="id-1-7-51" value="51">
                        <label class="custom-control-label" for="roleid-1-7-51">添加导航菜单</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-7-52" dataid="id-1-7-52" value="52">
                        <label class="custom-control-label" for="roleid-1-7-52">编辑导航菜单</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-7-53" dataid="id-1-7-53" value="53">
                        <label class="custom-control-label" for="roleid-1-7-53">删除导航菜单</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-20">
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-parent checkbox-child" id="roleid-1-8" dataid="id-1-8" value="8">
                        <label class="custom-control-label" for="roleid-1-8">栏目管理</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-40">
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-8-40" dataid="id-1-8-40" value="40">
                        <label class="custom-control-label" for="roleid-1-8-40">添加栏目</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-8-41" dataid="id-1-8-41" value="41">
                        <label class="custom-control-label" for="roleid-1-8-41">编辑栏目</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-8-42" dataid="id-1-8-42" value="42">
                        <label class="custom-control-label" for="roleid-1-8-42">删除栏目</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-20">
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-parent checkbox-child" id="roleid-1-9" dataid="id-1-9" value="9">
                        <label class="custom-control-label" for="roleid-1-9">权限列表</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-40">
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-9-36" dataid="id-1-9-36" value="36">
                        <label class="custom-control-label" for="roleid-1-9-36">添加规则</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-9-37" dataid="id-1-9-37" value="37">
                        <label class="custom-control-label" for="roleid-1-9-37">编辑规则</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-9-38" dataid="id-1-9-38" value="38">
                        <label class="custom-control-label" for="roleid-1-9-38">删除规则</label>
                      </div>
                      <div class="custom-control custom-checkbox custom-control-inline">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-child" id="roleid-1-9-39" dataid="id-1-9-39" value="39">
                        <label class="custom-control-label" for="roleid-1-9-39">禁用/启用规则</label>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td class="p-l-20">
                      <div class="custom-control custom-checkbox">
                        <input type="checkbox" name="rules[]" class="custom-control-input checkbox-parent checkbox-child" id="roleid-1-73" dataid="id-1-73" value="73">
                        <label class="custom-control-label" for="roleid-1-73">后台首页</label>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </form>

        </div>
      </div>
    </div>

  </div>

</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/popper.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="js/chosen.jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    //动态选择框，上下级选中状态变化
    $('input.checkbox-parent').on('change', function(){
        var dataid = $(this).attr("dataid");
        $('input[dataid^=' + dataid + '-]').prop('checked', $(this).is(':checked'));
    });
    $('input.checkbox-child').on('change', function(){
        var dataid = $(this).attr("dataid");
            dataid = dataid.substring(0, dataid.lastIndexOf("-"));
        var parent = $('input[dataid=' + dataid + ']');
        if($(this).is(':checked')){
            parent.prop('checked', true);
            //循环到顶级
            while(dataid.lastIndexOf("-") != 2){
                dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                parent = $('input[dataid=' + dataid + ']');
                parent.prop('checked', true);
            }
        }else{
            //父级
            if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                parent.prop('checked', false);
                //循环到顶级
                while(dataid.lastIndexOf("-") != 2){
                    dataid = dataid.substring(0, dataid.lastIndexOf("-"));
                    parent = $('input[dataid=' + dataid + ']');
                    if($('input[dataid^=' + dataid + '-]:checked').length == 0){
                        parent.prop('checked', false);
                    }
                }
            }
        }
    });
});
</script>
</body>
</html>