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!
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>