如何在不重新加载页面的情况下更新复选框值？

Question

I got a code how to disable checkbox once the user select up until 3rd checkbox. Thanks to him and I give him credit for this code. However, it seems that, I need to refreshed the page in order to see the code in action. Its like when I already select up until 3rd checkbox, I still can select the fourth one and so on until i refreshed it. Is there a way how to make it disabled once I select up to 3rd checkbox?

See the foreach part for my disabling code

$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 > 1){
                echo "<script>
                var checkboxes = $('.sBorrow').not(':checked');
                $.each(checkboxes, function(idx, cb) {
                    $(cb).attr('disabled', 'disabled');
                });
                </script>";
            }
            else{
                echo "<script>
                $(cb).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'];


    }
    echo "</tbody>";
    echo "</table>";
}

So far im using this to reload the page when the checkbox selected. But if i do this, the problem is that when im on the 2nd page or more like any other page, once it refresh it will return me to first page. Isnt that annoying. My list of data are so many.

See the most bottom code for my location.reload method.

function ajaxSearchUpdater(p){
        $("#result").show();

        var x = $("#search").val();
        var y = $("#edulevel").val();
        var pagelim = $("#pagefpe").val();
        var pagenumber = p;
        var checkb = $(".sBorrow").val()
        $.ajax({
            type:'POST',
            url:'userres.php',
            data:'q='+x+'&e='+y+'&pagelim='+pagelim+'&pageno='+pagenumber+'&checkb='+checkb,
            cache:false,
            success:function(data){
                $("#result").html(data)
            }
        });
    }


    function setsession(sessionid,action){
        $("#totalselection").show();
        $.ajax({
            type:'POST',
            url:'test.php',
            data:'sBorrow='+sessionid+'&action='+action,
            cache:false,
            success:function(data){
                var out = "<p align='center' style='text-decoration:none;color:white;'>Total Selection: "+data+"<br/>Click here to submit your request&nbsp;<a href='borrowform.php?subid=borrow' id='submitborrow' name='submitborrow' style='text-align:center;'><input type='button' value='REQUEST' id='submitborrow' name='submitborrow'></a>&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;Click here to clear the selection <a href='#' style='text-align:center;'><input type='button' value='CLEAR'></a></p>";

                $("#totalselection").html(out)
            }
        });
    }



    $(document).ready(function(e) {
        ajaxSearchUpdater(1);           // fires on document.ready
        $("#search").keyup(function() {
            ajaxSearchUpdater(1);           // your function call
        });
        $("#edulevel").click(function() {
            ajaxSearchUpdater(1);           // your function call
        });
        $("#pagefpe").click(function() {
            ajaxSearchUpdater(1);           // your function call
        });
        $(document).delegate('.sBorrow', 'change', function(){
            var sBorrowClass = $(this).attr('class');
            var sBorrowValue = $(this).attr('value');
            var sBorrowName = $(this).attr('name');
            var sBorrowChecked = $(this).attr('checked');
            var checked = this.checked;

            if(checked){    
                setsession(sBorrowValue, "SET");
                location.reload();
            }
            else{
                setsession(sBorrowValue, "UNSET");
            }
        })
    });