当达到第3个复选框时,如何设置复选框取消选中

时间:2016-08-04 06:40:30

标签: javascript php jquery checkbox

我有很多来自数据库然后使用foreach循环的复选框。我把if else放在我的foreach循环中以设置用户是否已选择第3个复选框,然后所有其他复选框将拒绝用户选择,如自动取消选中或禁用。我想禁用它,但如果我这样做,则所有复选框都将被禁用。如果你看到我在哪里使用if else条件为$ countses,那么我想在哪里使用代码。但是,一旦用户选择了第三个复选框,我就不会自动取消选中。

注意:我可以通过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>";
}

修改

使用弹簧代码,我应该这样做吗? `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 = "";
        }

        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'];


}`

1 个答案:

答案 0 :(得分: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);
}