顯示具有 jquery 標籤的文章。 顯示所有文章
顯示具有 jquery 標籤的文章。 顯示所有文章

2016年3月8日 星期二

JQuery-MenuTree勾選

<table>
  <caption>角色 - 新增</caption>
  <tr>
    <td>
      <fieldset>
        <br />角色名稱: <input type="text" value="" name="roleName"
          id="roleName" maxlength="50" /> <br />
        <legend>權限設定</legend>
        <div id="divTree">

          <ul>
            <li class="folder"><input type="checkbox" status="all"
              class="parent_B30000" id="B30000" name="access" value="B30000">分行管理
              <ul>

                <li><input type="checkbox" class="son_B30000" id="B31000"
                  name="access" value="B31000">強制開關機設定</li>

                <li><input type="checkbox" class="son_B30000" id="B32000"
                  name="access" value="B32000">定期開關機設定</li>

                <li><input type="checkbox" class="son_B30000" id="B33000"
                  name="access" value="B33000">預約開關機設定</li>

              </ul></li>
          </ul>

          <ul>
            <li class="folder"><input type="checkbox" status="all"
              class="parent_B50000" id="B50000" name="access" value="B50000">行員帳號權限管理
              <ul>

                <li><input type="checkbox" class="son_B50000" id="B51000"
                  name="access" value="B51000">帳號管理</li>

                <li><input type="checkbox" class="son_B50000" id="B52000"
                  name="access" value="B52000">角色維護</li>

              </ul></li>
          </ul>

        </div>
      </fieldset>
    </td>
  </tr>
  <tr>
    <td>
      <button type="reset" id="btnReset">重設</button>
      <button type="button" id="btnSubmit">新增</button>
    </td>
  </tr>
</table>
<script>

$( document ).ready(function() {
  $('#btnSubmit').click(function(){
    if($('#roleName').val()==""){
      alert("請輸入角色名稱!");
      return false ;
    }
    var chk = false ;
    $('input[type=checkbox]').each(function () {
        if($(this).prop("checked")){
      chk = true ;
      }
    })
    if(!chk){
      alert("請選擇權限!");
      return false ;
    }else{
      $('#myForm').submit();
    }
  })
  
  $('input[type=checkbox]').click(function(){
    var checkClass = $(this).attr("class");
    console.info(checkClass);
    var parentClass = checkClass.replace("son","parent");
    var tmp = 'input[type=checkbox].'+checkClass ;
    allChk = false ;
    $(tmp).each(function () {
      if($(this).prop("checked")){
        allChk = true ;
      }
      if (allChk){
        var tmp2 = 'input[type=checkbox].'+parentClass
        $(tmp2).prop("checked",true);
      }
      else{
        var tmp2 = 'input[type=checkbox].'+parentClass
        $(tmp2).prop("checked",false);
      }
    })
  })
  
  
  var parentItem = $('input[status="all"]');
  $(parentItem).click(function(){
    if ($(this).prop("checked")){
      var checkClass = $(this).attr("class");
      var sonClass = checkClass.replace("parent","son");
      var tmpSon = 'input[type=checkbox].'+sonClass  ;
      $(tmpSon).prop("checked",true);
    }else{
      var checkClass = $(this).attr("class");
      var sonClass = checkClass.replace("parent","son");
      var tmpSon = 'input[type=checkbox].'+sonClass  ;
      $(tmpSon).prop("checked",false);
    }
  })
})
</script>