Function that decrements a number on tick of checkbox

Hi

I am looking for a function that will do this:

1.) I will predefine a number, eg 250. -> this need to be displayed, either in a readonly textbox or span or div....
2.) There will be about 1000 rows of record displayed in a table, each row will have a checkbox.
3.) On ticking the checkbox the number will decrease, i.e. 250 - 1
4.) On unticking the checkbox the number will increase, i.e. 250 + 1
5.) The user will not be able to tick anymore of the checkboxes if maximum is reached, i.e. 250 checked and the display will show 0
6.) Once the user has ticked the maximum (250) allowed records, only then he can submit the form. Nothing less and nothing more.

Thanks in advance.
LVL 12
minichickenAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BatalfCommented:
1.) I will predefine a number, eg 250. -> this need to be displayed, either in a readonly textbox or span or div....
2.) There will be about 1000 rows of record displayed in a table, each row will have a checkbox.
3.) On ticking the checkbox the number will decrease, i.e. 250 - 1
4.) On unticking the checkbox the number will increase, i.e. 250 + 1
5.) The user will not be able to tick anymore of the checkboxes if maximum is reached, i.e. 250 checked and the display will show 0
6.) Once the user has ticked the maximum (250) allowed records, only then he can submit the form. Nothing less and nothing more.


<html>
    <head>
    <script type="text/javascript">
   
    var maxItems = 25;
    var noBoxes = 50;
    function calculate(obj){
        var startNo=maxItems;
        for(var no=0;no<noBoxes;no++){
            var el = document.forms[0].elements['box['+no+']'];
            if(el.checked)startNo = startNo-1;
        }    
        if(startNo==0)obj.checked=false;
        if(startNo==0)document.forms[0].submitButton.disabled=false; else document.forms[0].submitButton.disabled=true;
        document.forms[0].sum.value = startNo;
    }
   
    </script>
    </head>
    <body>
    <form>
    <input type="text" name="sum" value="25">
    <input type="submit" value="submitform" name="submitButton" disabled>    
   
<input type="checkbox" onclick="calculate(this)" name="box[0]" value="1"> Check 1<br>

<input type="checkbox" onclick="calculate(this)" name="box[1]" value="1"> Check 2<br>

<input type="checkbox" onclick="calculate(this)" name="box[2]" value="1"> Check 3<br>

<input type="checkbox" onclick="calculate(this)" name="box[3]" value="1"> Check 4<br>

<input type="checkbox" onclick="calculate(this)" name="box[4]" value="1"> Check 5<br>

<input type="checkbox" onclick="calculate(this)" name="box[5]" value="1"> Check 6<br>

<input type="checkbox" onclick="calculate(this)" name="box[6]" value="1"> Check 7<br>

<input type="checkbox" onclick="calculate(this)" name="box[7]" value="1"> Check 8<br>

<input type="checkbox" onclick="calculate(this)" name="box[8]" value="1"> Check 9<br>

<input type="checkbox" onclick="calculate(this)" name="box[9]" value="1"> Check 10<br>

<input type="checkbox" onclick="calculate(this)" name="box[10]" value="1"> Check 11<br>

<input type="checkbox" onclick="calculate(this)" name="box[11]" value="1"> Check 12<br>

<input type="checkbox" onclick="calculate(this)" name="box[12]" value="1"> Check 13<br>

<input type="checkbox" onclick="calculate(this)" name="box[13]" value="1"> Check 14<br>

<input type="checkbox" onclick="calculate(this)" name="box[14]" value="1"> Check 15<br>

<input type="checkbox" onclick="calculate(this)" name="box[15]" value="1"> Check 16<br>

<input type="checkbox" onclick="calculate(this)" name="box[16]" value="1"> Check 17<br>

<input type="checkbox" onclick="calculate(this)" name="box[17]" value="1"> Check 18<br>

<input type="checkbox" onclick="calculate(this)" name="box[18]" value="1"> Check 19<br>

<input type="checkbox" onclick="calculate(this)" name="box[19]" value="1"> Check 20<br>

<input type="checkbox" onclick="calculate(this)" name="box[20]" value="1"> Check 21<br>

<input type="checkbox" onclick="calculate(this)" name="box[21]" value="1"> Check 22<br>

<input type="checkbox" onclick="calculate(this)" name="box[22]" value="1"> Check 23<br>

<input type="checkbox" onclick="calculate(this)" name="box[23]" value="1"> Check 24<br>

<input type="checkbox" onclick="calculate(this)" name="box[24]" value="1"> Check 25<br>

<input type="checkbox" onclick="calculate(this)" name="box[25]" value="1"> Check 26<br>

<input type="checkbox" onclick="calculate(this)" name="box[26]" value="1"> Check 27<br>

<input type="checkbox" onclick="calculate(this)" name="box[27]" value="1"> Check 28<br>

<input type="checkbox" onclick="calculate(this)" name="box[28]" value="1"> Check 29<br>

<input type="checkbox" onclick="calculate(this)" name="box[29]" value="1"> Check 30<br>

<input type="checkbox" onclick="calculate(this)" name="box[30]" value="1"> Check 31<br>

<input type="checkbox" onclick="calculate(this)" name="box[31]" value="1"> Check 32<br>

<input type="checkbox" onclick="calculate(this)" name="box[32]" value="1"> Check 33<br>

<input type="checkbox" onclick="calculate(this)" name="box[33]" value="1"> Check 34<br>

<input type="checkbox" onclick="calculate(this)" name="box[34]" value="1"> Check 35<br>

<input type="checkbox" onclick="calculate(this)" name="box[35]" value="1"> Check 36<br>

<input type="checkbox" onclick="calculate(this)" name="box[36]" value="1"> Check 37<br>

<input type="checkbox" onclick="calculate(this)" name="box[37]" value="1"> Check 38<br>

<input type="checkbox" onclick="calculate(this)" name="box[38]" value="1"> Check 39<br>

<input type="checkbox" onclick="calculate(this)" name="box[39]" value="1"> Check 40<br>

<input type="checkbox" onclick="calculate(this)" name="box[40]" value="1"> Check 41<br>

<input type="checkbox" onclick="calculate(this)" name="box[41]" value="1"> Check 42<br>

<input type="checkbox" onclick="calculate(this)" name="box[42]" value="1"> Check 43<br>

<input type="checkbox" onclick="calculate(this)" name="box[43]" value="1"> Check 44<br>

<input type="checkbox" onclick="calculate(this)" name="box[44]" value="1"> Check 45<br>

<input type="checkbox" onclick="calculate(this)" name="box[45]" value="1"> Check 46<br>

<input type="checkbox" onclick="calculate(this)" name="box[46]" value="1"> Check 47<br>

<input type="checkbox" onclick="calculate(this)" name="box[47]" value="1"> Check 48<br>

<input type="checkbox" onclick="calculate(this)" name="box[48]" value="1"> Check 49<br>

<input type="checkbox" onclick="calculate(this)" name="box[49]" value="1"> Check 50<br>
   

    </form>
   
    </body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
NETTY4Commented:
Here you go:

<html>
<head>
<script>
var maxCheck = 5;
function checkBox(theBox){
  var elem = theBox.form.elements;
  var count = 0;
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="checkbox" && elem[i].className=="checker"){
      if(elem[i].checked==true){
        count++;
        if(count>maxCheck){
          count--;
          theBox.checked = false;
          alert("Checkable count exhausted.");
          break;
        }
      }
    }
  }
  document.getElementById("boxLeft").innerHTML = maxCheck-count;
}
function init(){
  var elem = document.forms[0].elements;
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="checkbox" && elem[i].className=="checker"){
      elem[i].onclick = function(){checkBox(this)};
    }
  }
  document.getElementById("boxLeft").innerHTML = maxCheck;
}
</script>
</head>
<body onLoad="init()">
Box left:
<span id="boxLeft"></span>
<form>
<input type=checkbox name="C1" class="checker">
<input type=checkbox name="C2" class="checker">
<input type=checkbox name="C3" class="checker">
<input type=checkbox name="C4" class="checker">
<input type=checkbox name="C5" class="checker">
<input type=checkbox name="C6" class="checker">
<input type=checkbox name="C7" class="checker">
<input type=checkbox name="C8" class="checker">
<input type=checkbox name="C9" class="checker">
</form>
</body>
</html>


0
minichickenAuthor Commented:
Hi Batalf

Thanks for the post.
The concept is all correct, but it does not let me tick the last checkbox. In your example. It only allow me to tick 24 boxes.

And may I also ask how would I display the counter without the readonly text box, but with span or div so it displays like other text on the page.

Thanks :)
0
BatalfCommented:
change

if(startNo==0)obj.checked=false;

to

if(startNo==-1){
   obj.checked=false;
   startNo = 0;
}
0
minichickenAuthor Commented:
thanks guys :)

combined the two solutions...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.