I am creating dynamic list on page. And the input element is propagated with data from db.
What I want to do is list the data, in input elements, with a checkbox at the end of each line. But I only want to be able to allow a user to click any 3 of the checkboxes.
Could be 20 options, but only 3 can be selected.
From here they can then proceed. So I have a submit button that I wish to disable unless 3 are clicked.
So the input elements and checkboxes are like so.
<input class="inputLONG" type="text" READONLY value="123 Hauton Road, Burpengary QLD 4506" class="small"> <input name="approved" id="check1" value="1" type="checkBox" />
<input class="inputLONG" type="text" READONLY value="86 Clandestine Boulevard, Beachmere QLD 4505" class="small"> <input name="approved" id="check2" value="1" type="checkBox" />
<input class="inputLONG" type="text" READONLY value="82 Sentinnel Court, Raby Bay QLD 4178" class="small"> <input name="approved" id="check3" value="1" type="checkBox" />
<input class="inputLONG" type="text" READONLY value="1 Lido Court, Wellington Point QLD 4200" class="small"> <input name="approved" id="check4" value="1" type="checkBox" />
And the Order Button. Which needs to be disabled unless three checkboxes are ticked.
<span class="samplePromo">Order</span>
Any help appreciated.
Oh and NO LESS than or NO MORE than 3 can be selected.
I am creating dynamic list on page. And the input element is propagated with data from db.
What I want to do is list the data, in input elements, with a checkbox at the end of each line. But I only want to be able to allow a user to click any 3 of the checkboxes.
Could be 20 options, but only 3 can be selected.
From here they can then proceed. So I have a submit button that I wish to disable unless 3 are clicked.
So the input elements and checkboxes are like so.
<input class="inputLONG" type="text" READONLY value="123 Hauton Road, Burpengary QLD 4506" class="small"> <input name="approved" id="check1" value="1" type="checkBox" />
<input class="inputLONG" type="text" READONLY value="86 Clandestine Boulevard, Beachmere QLD 4505" class="small"> <input name="approved" id="check2" value="1" type="checkBox" />
<input class="inputLONG" type="text" READONLY value="82 Sentinnel Court, Raby Bay QLD 4178" class="small"> <input name="approved" id="check3" value="1" type="checkBox" />
<input class="inputLONG" type="text" READONLY value="1 Lido Court, Wellington Point QLD 4200" class="small"> <input name="approved" id="check4" value="1" type="checkBox" />
And the Order Button. Which needs to be disabled unless three checkboxes are ticked.
<span class="samplePromo">Order</span>
Any help appreciated.
Oh and NO LESS than or NO MORE than 3 can be selected.
Share Improve this question edited Mar 15, 2011 at 3:09 Mahesh Velaga 22k5 gold badges40 silver badges60 bronze badges asked Mar 13, 2011 at 5:34 422422 5,77024 gold badges86 silver badges140 bronze badges 1- Been looking for this. +1 Favorited – Steven Hammons Commented Mar 13, 2011 at 5:36
3 Answers
Reset to default 3I have written a small snippet to do this for you in jsFiddle.
http://jsfiddle/mvelaga/Ed8jQ/
Edit:
New fiddle to address the scenario discussed in ments
http://jsfiddle/mvelaga/kKGcJ/1/
Found a script to do I think.
http://www.plus2net./javascript_tutorial/checkbox-limit.php
write custom function which will fire onclick (or onchange) of checkbox, disable rest of them when 3 are checked, enable buttom, react opposite if less than 3 are on...