javascript - 如何设置复选框到达第三个复选框时自动取消选中

Question

我有很多来自数据库的复选框，然后使用 foreach 循环。我将 if else 放入 foreach 循环中，以设置如果用户已经选择了第三个复选框，则所有其他复选框将拒绝用户选择，例如自动取消选中或禁用。我想禁用它，但如果我这样做，所有复选框都将被禁用。如果您看到我对 $countses 使用 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'];


}`

Answer 1

为什么要为所有复选框分配相同的 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);
}