根据三个php变量限制数组中的可选复选框（每列最多1个，每行10个，总共15个）

Question

I have an array of checkboxes generated with php. I can not display every checkbox because of previous choices by other users.

for($i=0;$i<$maxrows;$i++)
{
   $already_selected[$i]=0; 
   for($a=0;$a<$maxcols;$a++)
   {
      $value=$mat[$i][$a];
      if($value>0)
      {
         echo"<input type='checkbox' name='arr[$i][$a]' value='$uid'/>";
      }  
      else
      {
         echo"<input type='hidden' name='arr[$i][$a]' value='$value'/>";
         $already_selected[$i]+=1; 
      }
   }   
}

I have to limit the selectable checkboxes in a (for me, at least) complex way: The user must be able to choose: - One checkbox for each column maximum - Maximum $x checkboxes per row (where x is calculated by php as: $maximum_per_row - $already_selected) - Maximum $y checkboxes over the entire grid (where y is a php variable received by the previous page).

Is it possible?

Maybe something like:

echo"
      <script type='text/javascript'>
          var limit = $y;
          $('input.ggrid').on('change', function(evt)
          {
            if($('input[class='ggrid']:checked').length >= limit)
            {
              this.checked = false;
            }
          });
      </script>
";
for($i=0;$i<$maxrows;$i++)
{
   echo"
      <script type='text/javascript'>
          var limit = $maximum_per_row[$i] - $already_selected[$i];
          $('input.row$i').on('change', function(evt)
          {
            if($('input[class='row$i']:checked').length >= limit)
            {
              this.checked = false;
            }
          });
      </script>
   "; 
   for($a=0;$a<$maxcols;$a++)
   {
      echo"
      <script type='text/javascript'>
          var limit = 1;
          $('input.col$a').on('change', function(evt)
          {
            if($('input[class='col$a']:checked').length >= limit)
            {
              this.checked = false;
            }
          });
      </script>
      ";
   }   
}
for($i=0;$i<$maxrows;$i++)
{
   $already_selected=0; 
   for($a=0;$a<$maxcols;$a++)
   {
      $value=$mat[$i][$a];
      if($value>0)
      {
         echo"<input type='checkbox' class='col$a row$i ggrid'name='arr[$i][$a]' value='$uid'/>";
      }  
      else
      {
         echo"<input type='hidden' name='arr[$i][$a]' value='$value'/>";
         $already_selected+=1; 
      }
   }   
}

which obviously does not work... Thank you in advance!

Answer 1

Please refer to the following code. PHP and pure javascript, no jQuery.

<?php

$maxrows=4; //example, you could replace it with your value
$maxcols=8; //example, you could replace it with your value
$y=1;       //example, you could replace it with your value
$x=array();

for($i=0;$i<$maxrows;$i++)
{
    $already_selected[$i]=0; 
    $test_symbol=1; //value to let half of the inputs are hidden for example, you could delete it
    for($a=0;$a<$maxcols;$a++)
    {
        //$value=$mat[$i][$a];
        $test_symbol=$test_symbol==1?-1:1;
        $value=$a*$test_symbol; //as example, you could replace it with your value
        $uid=$a; //as example
        if($value>0)
        {
            echo"<input type='checkbox' id='arr_".$i."_".$a."' name='arr_".$i."_".$a."' value='$uid'/ onclick='check_limit($i,$a)'> 
";
        }  
        else
        {
            echo"<input type='hidden' name='arr_".$i."_".$a."' value='$value'/> 
";
            $already_selected[$i]+=1; 
        }
    }
    echo "$i row selected:".$already_selected[$i]."
 <br>"; 
    $x[$i] = $maxcols-$already_selected[$i]-$y;

}

?>

<script language="javascript">
var row_limit = <?php echo json_encode($x) ?>;

var maxrows = <?php echo $maxrows ?>;
var maxcols = <?php echo $maxcols ?>;

function check_limit(row,col){

    //row control, max allowd by array calculated from PHP
    for(i = 0; i < maxrows; i++){
        tempSelected = 0;

        for(j=0;j<maxcols;j++){
            if(document.getElementById("arr_"+i+"_"+j)){
                if(document.getElementById("arr_"+i+"_"+j).checked){
                    tempSelected++;
                }
            }
        }
        if(tempSelected>row_limit[i]){
            alert("Maximum " + row_limit[i] + "per row allowed!");
            document.getElementById("arr_" + row + "_" + col).checked=false;
            return;
        }
    }

    //column control, max 1 allowed for each column
    for(j=0;j<maxcols;j++){
        tempSelected = 0;

        for(i=0;i<maxrows;i++){
            if(document.getElementById("arr_"+i+"_"+j)){
                if(document.getElementById("arr_"+i+"_"+j).checked){
                    tempSelected++;
                }
            }
        }
        if(tempSelected>1){
            alert("Maximum 1 per column allowed!")
            document.getElementById("arr_"+row+"_"+col).checked = false;
            return;
        }
    }


}
</script>