Disabling Checkboxes

[cyrixware]

Mabuhay everyone! I just wanna ask your opinions about disabling checkboxes. Let say i have 10 checkbox. I can only choose atleast 8 checkboxes out of 10. I ask you this guys because an hour ago i created a simple voting system. I have 10 candidates for that position. 8 out of 10 will be consider as winner.

 

ex.

 

contestant 1   | chkbox

contestant 2   | chkbox

contestant 3   | chkbox

contestant 4   | chkbox

contestant 5   | chkbox

contestant 6   | chkbox

contestant 7   | chkbox

contestant 8   | chkbox

contestant 9   | chkbox

contestant 10 | chkbox

 

I want to disable the remaining 2 checkboxes after i finished selecting the 8 checkboxes. Any idea how to do that? Do i need to use javascript or some php techniques? I appreciate all answers.... Thanks.

 

 

[roopurt18]

You will have to use Javascript to disable them on the fly as your users click on them.  Essentially you add an onclick event handler to each one and when this handler fires you count how many are checked and disabled the remaining ones.

 

You will still need to verify that only 8 (or however many) have been selected in your PHP script for those users that turn Javascript off or use another means to submit more than the number you want to allow.

[kranthi117]

this is a javascript question

 

1. give an onfocus event for the every checkbox

2. count the number of checkboxes that are checked

3. if the number is equal to 8 then disable the remaining 2 checkboxes by using

for(var i=0;i<10;i++)
if(!document.getElementsByName("checkboxes")[i].checked)
document.getElementsByName("checkboxes")[i].disabled = true

 

 

[kranthi117]

well using onclick event is not suggested coz sum users(like me) depend mostly on keyboard for checkboxes and radio buttons

[cyrixware]

thanks guys. so what will be the best thing to do? using checkbox/radiobuttons or etc...?

[cyrixware]

Any idea? If its ok to you guys can you give me a very simple codes in disabling checkboxes or radio buttons. Let say we have only 3 checkboxes or radio buttons. After i select the first 2 checkboxes or radio button the remaining 1 checkbox or radio button will be disabled. You can only select up to 2 out of 3. Make sense? Thanks again.

[rhodesa]

Try this on for size. To use it, the checkboxes should have the same name, and the max is set in the onclick (i set it to 5)

 

<script type="text/javascript">
  function maxCheck ( node, max ) {
    //Get Form
    var form = node.form;
    if(!form) return;
    
    //Get List
    var nodeList = form[node.name];
    
    //Count number checked
    var c = 0;
    for(var n = 0;n < nodeList.length;n++){
      if(c >= max){ //Uncheck if we are over
        nodeList[n].checked = false; //This should never happen
      }else if(nodeList[n].checked){
        c++;
      }
    }
    if(c >= max){ //Disable others
      for(var n = 0;n < nodeList.length;n++){
        nodeList[n].disabled = !nodeList[n].checked;
      }
    }else{ //Enable everything
      for(var n = 0;n < nodeList.length;n++){
        nodeList[n].disabled = false;
      }
    }
  }
</script>
<form name="survey">
  <input type="checkbox" name="contestants[]" value="1" onclick="maxCheck(this,5);" /> Contestant 1<br>
  <input type="checkbox" name="contestants[]" value="2" onclick="maxCheck(this,5);" /> Contestant 2<br>
  <input type="checkbox" name="contestants[]" value="3" onclick="maxCheck(this,5);" /> Contestant 3<br>
  <input type="checkbox" name="contestants[]" value="4" onclick="maxCheck(this,5);" /> Contestant 4<br>
  <input type="checkbox" name="contestants[]" value="5" onclick="maxCheck(this,5);" /> Contestant 5<br>
  <input type="checkbox" name="contestants[]" value="6" onclick="maxCheck(this,5);" /> Contestant 6<br>
  <input type="checkbox" name="contestants[]" value="7" onclick="maxCheck(this,5);" /> Contestant 7<br>
  <input type="checkbox" name="contestants[]" value="8" onclick="maxCheck(this,5);" /> Contestant 8<br>
  <input type="checkbox" name="contestants[]" value="9" onclick="maxCheck(this,5);" /> Contestant 9<br>
  <input type="checkbox" name="contestants[]" value="10" onclick="maxCheck(this,5);" /> Contestant 10<br>
</form>

[indigobanana]

well using onclick event is not suggested coz sum users(like me) depend mostly on keyboard for checkboxes and radio buttons

 

If i remember rightly, Onclick would still be called by selecting a checkbox/radio button with a keyboard...