Ajax，php和jquery的CheckBox限制

Question

嗨，我在执行复选框限制时遇到了一些问题。 这是编码。 专注于ajaxTable.php。 我正在使用aceAdmin模板。

步骤：如果客户要求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>

接口

Answer 1

未经测试。 我宁愿做这样的事情：

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

这可能会解决问题，或者至少使您走上正确的道路

Answer 2

我在http://jsbin.com/epanex/4/edit?html,js,output中找到了答案

因此，解决方案在itemCheckOut.php的jquery函数中添加了这行代码

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