2016-11-02 15 views
0

こんにちは、私はチェックボックスの制限を行ういくつかの問題があります。ここにコーディングがあります。 Focus on ajaxTable.php。私はaceAdminテンプレートを使用しています。ajax、php、jqueryのCheckBox制限

手順: お客様のご要望が2つの場合、管理者はデータベースから呼び出されたノートから2つのノートブックのみを選択することができます。

問題: チェックボックスの制限が機能していない、私はajaxTable.php

にあるチェックボックスの制限コードを配置

itemCheckOut.php

<?php 
session_start(); 

include '../connect.php'; 

$surname = null; 

$icno = $_SESSION['owner']; 
$sql = "SELECT * FROM profile WHERE icno='$icno'"; 
$result = $conn -> query($sql); 
$getData = $result->fetch_assoc(); 

$surname = $getData['panggilan']; 


?> 

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
     <meta charset="utf-8" /> 

     <title>Admin Dashboard</title> 

     <meta name="description" content="overview &amp; stats" /> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> 

     <link rel="stylesheet" href="assets/css/bootstrap.min.css" /> 
     <link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" /> 
     <link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" /> 
     <link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" /> 
     <link rel="stylesheet" href="assets/css/ace-skins.min.css" /> 
     <link rel="stylesheet" href="assets/css/ace-rtl.min.css" /> 

     <script src="assets/js/ace-extra.min.js"></script> 
    </head> 

    <body class="no-skin"> 
     <div id="navbar" class="navbar navbar-default ace-save-state"> 
      <div class="navbar-container ace-save-state" id="navbar-container"> 
       <div class="navbar-header pull-left"> 
        <a href="index.php" class="navbar-brand"> 
         <small> 
          <i class="fa fa-archive"></i> 
          Selamat Datang : <?php echo $surname; ?> 
         </small> 
        </a> 
       </div> 
      </div><!-- /.navbar-container --> 
     </div> 

     <div class="main-container ace-save-state" id="main-container"> 
      <script type="text/javascript"> 
       try{ace.settings.loadState('main-container')}catch(e){} 
      </script> 

      <div id="sidebar" class="sidebar responsive ace-save-state"> 
       <script type="text/javascript"> 
        try{ace.settings.loadState('sidebar')}catch(e){} 
       </script> 

       <ul class="nav nav-list"> 
        <li class=""> 
         <a href="index.php"> 
          <i class="menu-icon fa fa-tachometer"></i> 
          <span class="menu-text"> Dashboard </span> 
         </a> 
         <b class="arrow"></b> 
        </li> 

        <li class=""> 
         <a href="#" class="dropdown-toggle"> 
          <i class="menu-icon fa fa-search"></i> 
          <span class="menu-text"> 
           Inventori 
          </span> 
         </a> 
         <b class="arrow"></b> 

         <ul class="submenu"> 
          <li class=""> 
           <a href="addInventory.php"> 
            <i class="menu-icon fa fa-search"></i> 
            <span class="menu-text"> 
             Tambah Inventori 
            </span> 
           </a> 
           <b class="arrow"></b> 
          </li> 

          <li class=""> 
           <a href="manageInventory.php"> 
            <i class="menu-icon fa fa-file-text-o"></i> 
            <span class="menu-text"> Uruskan Inventori </span> 
           </a> 

           <b class="arrow"></b> 
          </li> 

          <li class=""> 
           <a href="allInventory.php"> 
            <i class="menu-icon fa fa-list"></i> 
            <span class="menu-text"> Senarai Inventori </span> 
           </a> 
           <b class="arrow"></b> 
          </li> 
         </ul> 
        </li> 

        <li class=""> 
         <a href="bookingStatus.php"> 
          <i class="menu-icon fa fa-book"></i> 
          <span class="menu-text"> Status Tempahan </span> 
         </a> 

         <b class="arrow"></b> 
        </li> 

        <li class="active open"> 
         <a href="#" class="dropdown-toggle"> 
          <i class="menu-icon fa fa-flag"></i> 
          <span class="menu-text"> Uruskan Tempahan </span> 
         </a> 

         <b class="arrow"></b> 
         <ul class="submenu"> 
          <li class=""> 
           <a href="itemCheckIn.php"> 
            <i class="menu-icon fa fa-book"></i> 
            <span class="menu-text"> Inventori Masuk </span> 
           </a> 

           <b class="arrow"></b> 
          </li> 

          <li class="active"> 
           <a href="itemCheckOut.php"> 
            <i class="menu-icon fa fa-book"></i> 
            <span class="menu-text"> Inventori Keluar </span> 
           </a> 

           <b class="arrow"></b> 
          </li> 
         </ul> 
        </li> 

        <li class=""> 
         <a href="updateProfile.php"> 
          <i class="menu-icon fa fa-user"></i> 
          <span class="menu-text"> Kemas Kini Profile </span> 
         </a> 

         <b class="arrow"></b> 
        </li> 

        <li class=""> 
         <a href="../logout.php"> 
          <i class="menu-icon fa fa-list-alt"></i> 
          <span class="menu-text"> Logout </span> 
         </a> 

         <b class="arrow"></b> 
        </li> 
       </ul><!-- /.nav-list --> 

       <div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse"> 
        <i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i> 
       </div> 
      </div> 

      <div class="main-content"> 
       <div class="main-content-inner"> 
        <div class="page-content"> 
         <div class="page-header"> 
          <h1> 
           Inventori Keluar 
          </h1> 
         </div><!-- /.page-header --> 

         <div class="row"> 
          <div class="col-xs-12"> 
           <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" class="form-horizontal"> 
            <label>Pilih Peminjam : </label><br /> 
            <table id="simple-table" class="table table-bordered table-hover"> 
            <?php 
             echo " 
             <thead> 
              <tr> 
               <th>Kod Tempahan</th><th>Nama Peminjam</th><th>Jenis Item</th><th>Kuantiti</th><th>Pilihan</th> 
              </tr> 
             </thead> 
             <tbody> 
             "; 

             $sqlPinjaman = "SELECT * FROM pinjaman WHERE status=1"; 
             $queryPinjaman = $conn -> query($sqlPinjaman); 

             while ($resultPinjaman = $queryPinjaman -> fetch_assoc()) 
             { 
              $icnoUser = $resultPinjaman['peminjam']; 
              $sqlProfile = "SELECT nama FROM profile WHERE icno='$icnoUser'"; 
              $queryProfile = $conn -> query($sqlProfile); 
              $resultProfile = $queryProfile -> fetch_assoc(); 
              $namaProfile = $resultProfile['nama']; 

              echo " 
              <tr> 
               <td>". $resultPinjaman['bookid'] ."</td><td>$namaProfile</td><td>". $resultPinjaman['jenis'] ."</td><td>". $resultPinjaman['kuantiti'] ."</td> 
               <td> 
                <div class='radio'> 
                 <label> 
                  <input name='form-field-radio' type='radio' class='ace' value='". $resultPinjaman['jenis'] ."' onclick='showJenis(this.value)'/> 
                  <span class='lbl'>&nbsp;&nbsp;Pilih</span> 
                 </label> 
                </div> 
               </td> 
              </tr> 
             "; 

             } 
            ?> 
             </tbody> 
            </table> 

            <div id="showTable">PILIH TEMPAHAN DIATAS</div> 

            <div class="clearfix form-actions"> 
             <div class="col-md-offset-3 col-md-9"> 
              <button class="btn btn-info" type="submit"> 
               <i class="ace-icon fa fa-check bigger-110"></i> 
               Item Keluar 
              </button> 
             </div> 
            </div> 
           </form> 
          </div><!-- /.col --> 
         </div><!-- /.row --> 
        </div><!-- /.page-content --> 
       </div> 
      </div><!-- /.main-content --> 

      <div class="footer"> 
       <div class="footer-inner"> 
        <div class="footer-content"> 
         <span class="bigger-120"> 
          <span class="blue bolder">YT</span> 
          Inventory &copy; <?php echo date('Y'); ?> 
         </span> 
        </div> 
       </div> 
      </div> 

      <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> 
       <i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i> 
      </a> 
     </div><!-- /.main-container --> 

     <!-- basic scripts --> 

     <!--[if !IE]> --> 
     <script src="assets/js/jquery-2.1.4.min.js"></script> 

     <!-- <![endif]--> 

     <!--[if IE]> 
<script src="assets/js/jquery-1.11.3.min.js"></script> 
<![endif]--> 
     <script type="text/javascript"> 
      if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>"); 
     </script> 
     <script src="assets/js/bootstrap.min.js"></script> 

     <!-- page specific plugin scripts --> 

     <!--[if lte IE 8]> 
      <script src="assets/js/excanvas.min.js"></script> 
     <![endif]--> 
     <script src="assets/js/jquery-ui.custom.min.js"></script> 
     <script src="assets/js/jquery.ui.touch-punch.min.js"></script> 
     <script src="assets/js/jquery.easypiechart.min.js"></script> 
     <script src="assets/js/jquery.sparkline.index.min.js"></script> 
     <script src="assets/js/jquery.flot.min.js"></script> 
     <script src="assets/js/jquery.flot.pie.min.js"></script> 
     <script src="assets/js/jquery.flot.resize.min.js"></script> 

     <!-- ace scripts --> 
     <script src="assets/js/ace-elements.min.js"></script> 
     <script src="assets/js/ace.min.js"></script> 

     <!-- inline scripts related to this page --> 
     <script type="text/javascript"> 

      function showJenis(jenisItem) 
      { 
       if (jenisItem == "PS3") 
       { 
        document.getElementById("showTable").innerHTML = "FREE PS3"; 
        return; 
       } 
       else 
       { 
        if (window.XMLHttpRequest) 
        { 
         // code for IE7+, Firefox, Chrome, Opera, Safari 
         xmlhttp = new XMLHttpRequest(); 
        } 
        else 
        { 
         // code for IE6, IE5 
         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } 

        xmlhttp.onreadystatechange = function() 
        { 
         if (this.readyState == 4 && this.status == 200) 
         { 
         document.getElementById("showTable").innerHTML = this.responseText; 
         } 
        }; 
       } 

       xmlhttp.open("GET","ajaxTable.php?jenisItem=" + jenisItem, true); 
       xmlhttp.send(); 
      } 


      jQuery(function($) {    

       //show the dropdowns on top or bottom depending on window height and menu position 
       $('#task-tab .dropdown-hover').on('mouseenter', function(e) { 
        var offset = $(this).offset(); 

        var $w = $(window) 
        if (offset.top > $w.scrollTop() + $w.innerHeight() - 100) 
         $(this).addClass('dropup'); 
        else $(this).removeClass('dropup'); 
       }); 


      }) 
     </script> 
    </body> 
</html> 

ajaxTable.php

<?php 

session_start(); 

include '../connect.php'; 

$jenis = $_GET['jenisItem']; 

$sqlTable = "SELECT * FROM stock WHERE jenis='$jenis'"; 
$queryTable = $conn -> query($sqlTable); 

echo "<label>SILA PILIH ITEM UNTUK DIKELUARKAN :</label>"; 
?> 

<table id="simple-table" class="table table-bordered table-hover"> 
    <thead> 
     <tr> 
      <th>Jenama</th><th>Model</th><th>No Siri</th><th>No Siri Pendaftaran</th><th>Pilih</th> 
     </tr> 
    </thead> 
    </tbody> 

<?php 
while ($resultTable = $queryTable -> fetch_assoc()) 
{ 
    echo " 

    <tr> 
     <td>". $resultTable['jenama'] ."</td><td>". $resultTable['model'] ."</td><td>". $resultTable['nosiri'] ."</td><td>". $resultTable['nosiripendaftaran'] ."</td> 
     <td> 
      <div class='checkbox'> 
       <label> 
        <input name='form-field-checkbox' type='checkbox' class='ace limitBox' /> 
        <span class='lbl'>&nbsp;&nbsp;Pilih</span> 
       </label> 
      </div> 
     </td> 
    </tr> 

    "; 
} 

?> 
<script> 
    jQuery(function(){ 
     var max = 1; 
     var checkboxes = $('input[type="checkbox"]'); 

     checkboxes.change(function(){ 
      var current = checkboxes.filter(':checked').length; 
      checkboxes.filter(':not(:checked)').prop('disabled', current >= max); 
     }); 
    }); 
</script> 

    </tbody> 
</table> 

Interface

答えて

0

テストされていません。私は解決策は、この行を追加しますhttp://jsbin.com/epanex/4/edit?html,js,output

で答えを見つけたトリックを行う可能性があります

checkboxes.each('change',function() { 
    if ($(this).is('checked')) { 
    var counter += 1; 
    } 
    if (counter >= max) { 
    checkboxes.not('checked').prop('disabled',true); 
    } 
}); 

、または少なくとも正しい軌道に乗って

+0

http://jsfiddle.net/jaredhoyt/Ghtbu/1/ でjQueryの関数のコードの私はそこから一例を得ました。 私はまだあなたのコードを試して、今働いている。 T-T ajaxの問題?どんな手掛かり? – Asyraf

+0

解決策が見つかりました。ご協力いただきありがとうございます。 – Asyraf

+0

Ah、right - 'current> = max'は真と評価されます。しかし、解決策を見つけたら、それをあなた自身の答えに入れるべきです。そうすれば、他の人が同様の問題を探すのにも役立ちます。 – junkfoodjunkie

0

をあなたを得る:私はむしろこのような何かをするだろうitemCheckOut.php

$("form").on("click", ":checkbox", function(event){ 
    $(":checkbox:not(:checked)", this.form).prop("disabled", function(){ 
    return $(this.form).find(":checkbox:checked").length == 2; 
    }); 
});