www.webdeveloper.com
Results 1 to 6 of 6

Thread: Enable button after checking 3 checkboxes

  1. #1
    Join Date
    Apr 2012
    Posts
    10

    Enable button after checking 3 checkboxes

    Hello,

    Ive 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.

    HTML Code:
    <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!

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  3. #3
    Join Date
    Apr 2012
    Posts
    10
    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:

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

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,264
    See this page about Input Button disabled property

  5. #5
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    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.
    |||||
    o . Q
    ___ "You live and you learn; or you don't live long." - Lazarus Long

    ^_^

  6. #6
    Join Date
    Apr 2012
    Posts
    10
    I solved everything! Thank you all for the clues

    HTML 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 > 4) {
        document.equipo.aceptar.disabled = false;
        document.equipo.aceptar.setAttribute("class", "aceptar");
        } else {
            document.equipo.aceptar.setAttribute("class", "disabled");
        }
    
    }
    </script>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles