Enable button after checking 3 checkboxes

[samuemx]

Hello,

I´ve a list with 10 checkboxes and I as wondering if there are any way of enable a submit button only when 3 of them are checked.

I've this code but it enables de button if any checkbox is checked.

<script type="text/javascript">
function enviar(){
    document.form.aceptar.disabled = true;
    for (i=0;i<document.form.elements.length;i++){
        if(document.form.elements[i].type == "checkbox"){
            if(document.equipo.elements[i].checked == 1 ){
                document.form.aceptar.disabled = false;
                
            }
        }
    }
}
</script>

Any clue would be great!

[WolfShade]

Inside the function, set another variable called "totalChecked" and set it to equal 0. Instead of using "document.form.aceptar.disabled = false;", use "totalChecked = totalChecked + 1;". After the loop, check if totalChecked equals 3. If it does, then use the "document.form.aceptar.disabled = false;" command.

[samuemx]

Wolf,

Thank you very much for your help. I think I did it, at least it works the way I want. This is the code:

<script type="text/javascript">
function enviar(){
    
    document.equipo.aceptar.disabled = true;
    
    var totalchecked=0;
    
    for (i=0;i<document.equipo.elements.length;i++){
        
        if(document.equipo.elements[i].type == "checkbox"){
            if(document.equipo.elements[i].checked == 1 ){
                totalchecked = totalchecked+1;
                
                }
        }
    }
    
    if (totalchecked == 3) {
    document.equipo.aceptar.disabled = false;
    }

}
</script>

What do you think?

Another question... How Can i do to change the style of the button dinamically? If it's disables call class="disabled" and if it's enabled class="enabled".

Thank you!

[007Julien]

See this page about Input Button disabled property

[WolfShade]

Buttons in most browsers will become gray, if disabled. If you want something different than the standard, create a class for each state, then change the class name as well as the disabled status.

[samuemx]

I solved everything! Thank you all for the clues

<script type="text/javascript">
function enviar(){
    
    document.equipo.aceptar.disabled = true;
    
    var totalchecked=0;
    
    for (i=0;i<document.equipo.elements.length;i++){
        
        if(document.equipo.elements[i].type == "checkbox"){
            if(document.equipo.elements[i].checked == 1 ){
                totalchecked = totalchecked+1;
                
                }
        }
    }
    
    if (totalchecked > 4) {
    document.equipo.aceptar.disabled = false;
    document.equipo.aceptar.setAttribute("class", "aceptar");
    } else {
        document.equipo.aceptar.setAttribute("class", "disabled");
    }

}
</script>