如何设置复选框,当其到达第三个复选框时自动取消选中


How to set the checkbox uncheck automatically when its reach 3rd checkbox

我有很多来自数据库的复选框,然后使用foreach循环。我在foreach循环中放入if-else,设置如果用户已经选择了第三个复选框,那么所有其他复选框都会拒绝用户的选择,比如自动取消选中或禁用。我想禁用它,但如果我这样做,所有复选框都将被禁用。如果你看到$countses的where i use If else条件,那么就有我想要使用代码的地方。但我不知道如何在用户选中第三个复选框后自动取消选中它。

注意:我可以通过PHP.禁用它,但它需要先刷新,而不是直接实现。所以我想我需要javascript 的帮助

我的代码看起来像这个

$query="SELECT abc.*
            FROM (".$selector.")abc
            WHERE 
                abc.studentname LIKE :q OR
                abc.matricno LIKE :q OR
                abc.title LIKE :q OR
                abc.year LIKE :q OR
                abc.thesis_level LIKE :q OR
                abc.programme LIKE :q OR
                abc.serialno LIKE :q
            LIMIT ".$startrow.",".$limitrow;

$stmt = $db->prepare($query);
$stmt->bindValue(':q','%'.$q.'%');
$stmt->bindValue(':e',$e);
$stmt->execute();

$startPage = ($pageno <5) ? 1 : $pageno -4;
$endPage = 8 + $startPage;
$endPage = ($maxpage < $endPage) ? $maxpage : $endPage;
$diff = $startPage - $endPage + 8;
$startPage -=($startPage - $diff > 0) ? $diff : 0;
$a = $startPage;
echo "<ol id='olpoint'>";
if($startPage > 1) echo "<a href='#' onclick='ajaxSearchUpdater(1);'><li>First</li></a>";
while($a<=$endPage){
        echo "<a href='#' onclick='ajaxSearchUpdater(".$a.");' style='text-decoration:none;'><li ";
        if($pageno == $a){
            echo "style='color:grey;font-size:medium;'";
        }
        echo ">".$a."</li></a>";
        $a++;
};
if($endPage < $maxpage) echo "<a href='#' onclick='ajaxSearchUpdater(".$maxpage.");'><li>End</li></a>";
echo "</ol>";


if($stmt->rowCount() > 0){
    $r=$stmt->fetchAll();
    echo "<table class='tablesorter-blackice' id='myTable' style='width:97%; table-border: 1'>";
    echo "<thead>";
    echo "<tr>";
    echo "<th>No.</th>";
    echo "<th>No.Matric</th>";
    echo "<th>Name</th>";
    echo "<th>Programme</th>";
    echo "<th>Title</th>";
    echo "<th>Thesis Level</th>";
    echo "<th>Serial Number</th>";
    echo "<th>Availability</th>";
    echo "<th>Select book (Max 3)</th>";
    echo "</tr>";
    echo "</thead>";
    echo "<tbody>";
    if(isset($_SESSION['sBorrow']))
        $arraynosiri = $_SESSION['sBorrow'];
    else
        $arraynosiri = array();
    $countses = count($_SESSION['sBorrow']);
    foreach($r as $row){
            echo "<tr align='center'><td>". ($startrow+1) ."</td><td>". $row['matricno'] ."</td><td>". $row['studentname'] ."</td><td>". $row['programme'] ."</td><td>". $row['title'] ."</td><td>". $row['thesis_level'] ."</td><td>". $row['serialno'] ."</td><td>". $row['bavailable'] ."</td><td>
            <form method='post'>";
            if($key = array_search($row['serialno'], $arraynosiri) !== false) {
                $checkbox = "checked";
            }
            else{
                $checkbox = "";
            }

            if($countses > 3){
                echo "MAX";
            }
            else{
                echo "MIN";
            }

            if($row['bavailable'] == "Available"){
                echo "<input type='checkbox' name='sBorrow' id='sBorrow' class='sBorrow' value='". $row['serialno'] ."' ".$checkbox.">
                </form></td></tr>";
                }
                else{
                echo "<input type='checkbox' name='sBorrow' id='sBorrow' class='sBorrow' value='". $row['serialno'] ."' ".$checkbox." style='color: grey;' disabled>
                </form></td></tr>";
            }

            $startrow++;
            //echo $row['education_level'];

    }
    echo "</tbody>";
    echo "</table>";
}
else{
    echo "<p align='center' style='color:white'; class='reminder'>Nothing to show you :( I am really sorry for this T_T </p>";
}

编辑

通过使用spring代码,我应该这样做吗?`foreach($r作为$row){

        echo "<tr align='center'><td>". ($startrow+1) ."</td><td>". $row['matricno'] ."</td><td>". $row['studentname'] ."</td><td>". $row['programme'] ."</td><td>". $row['title'] ."</td><td>". $row['thesis_level'] ."</td><td>". $row['serialno'] ."</td><td>". $row['bavailable'] ."</td><td>
        <form method='post'>";
        if($key = array_search($row['serialno'], $arraynosiri) !== false) {
            $checkbox = "checked";
        }
        else{
            $checkbox = "";
        }
        echo "<script>
        var checkedCbs = $('.sBorrow:checked');
        if (checkedCbs.length === 3) {
          var uncheckedCbs = $('.sBorrow').not(':checked');
          $.each(uncheckedCbs, function(idx, cb) {
              $(cb).attr('disabled', 'disabled');
          });
        } else {
          var disabledCb = $('.sBorrow:disabled');
          disabledCb.attr('disabled', false);
          </script>";

        if($row['bavailable'] == "Available"){
            echo "<input type='checkbox' name='sBorrow' id='sBorrow' class='sBorrow' value='". $row['serialno'] ."' ".$checkbox.">
            </form></td></tr>";
            }
            else{
            echo "<input type='checkbox' name='sBorrow' id='sBorrow' class='sBorrow' value='". $row['serialno'] ."' ".$checkbox." style='color: grey;' disabled>
            </form></td></tr>";
        }

        $startrow++;
        //echo $row['education_level'];

}`

为什么为所有复选框分配相同的ID?

单击复选框时,您必须对数字进行计数。当选中三个复选框时,执行以下操作禁用所有复选框,

var checkboxes = $(".sBorrow").not(':checked');
$.each(checkboxes, function(idx, cb) {
    $(cb).attr("disabled", "disabled");
});

更新

完整的代码如下所示。每次选中复选框时都会调用此操作。

var checkedCbs = $('.sBorrow:checked');
if (checkedCbs.length === 3) {
  var uncheckedCbs = $('.sBorrow').not(':checked');
  $.each(uncheckedCbs, function(idx, cb) {
      $(cb).attr("disabled", "disabled");
  });
} else {
  var disabledCb = $('.sBorrow:disabled');
  disabledCb.attr("disabled", false);
}