How To enable button when all chekboxes are checked?

**leopro** · Feb 22, 2013 03:52

Hi folks,

I have 4 checkboxes, a button and a div.

The checkboxes are unchecked, the button is disabled and the div opacity is '0.1'.
When all checkboxes are checked, the button should be enabled, and when the button is clicked, div opacity should be '0.9'.

I need help in enabling the button. Here's my code: http://jsfiddle.net/HzCvt/3/
Please, have a look and tell me where I went wrong.

Thank you!

**Pullo** · Feb 22, 2013 04:13

Hi there leopro,

Welcome to the forums

You can do it like this:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <!--http://www.sitepoint.com/forums/showthread.php?980483-How-To-enable-button-when-all-chekboxes-are-checked-->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Enable button when all checkboxes are checked</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>

  <body>
    <div id="checklist">
      <input type="checkbox" value="1" name="1st" class="checkbox" />111<br />
      <input type="checkbox" value="2" name="2nd" class="checkbox" />222<br />
      <input type="checkbox" value="3" name="3rd" class="checkbox" />333<br />
      <input type="checkbox" value="4" name="4th" class="checkbox" />444<br />
      <p><button id="show" class="checkcheck" disabled="true">Go on</button></p>
    </div><!-- end #checklist -->
    
    <div id="hidden" style="background-color: #448844; opacity: 0.1;">
      <h3>HELLO!</h3>
    </div><!-- end #hidden -->
    
    <script>
      $(document).ready(function() {
        var checkboxes = $('input[type="checkbox"]');
        checkboxes.change(function(){
          buttonState = ($( "input:checked" ).length == 4)? false : true;
          $("#show").prop("disabled", buttonState);
        });
        
        $("#show").click(function(){
          $("#hidden").css("opacity", "0.9");
        });
      });
    </script>
  </body>
</html>

The only thing to consider is that once the button has been enabled and clicked, the div will be visible from that point on.
Is this the intended functionality?

**leopro** · Feb 22, 2013 04:59

Hi Dave,

Thanks a lot for your answer.

It's OK if the div will always be visible after the button is once clicked.
I could at last get it work! Thank you!

But I had to put the <script>...</script> right before </body> tag, in the footer in order to get it work.
So, now it will load, every time any page of my website loads.
Can I have it on one particular page only?

Thank you!

**Pullo** · Feb 22, 2013 05:17

Originally Posted by leopro

But I had to put the <script>...</script> right before </body> tag, in the footer in order to get it work.
So, now it will load, every time any page of my website loads.
Can I have it on one particular page only?

Yeah, probably.
Are you using a CMS?

**leopro** · Feb 22, 2013 05:18

Yes, I am using WordPress.

**Pullo** · Feb 22, 2013 05:22

You can probably do something like this:

PHP Code:


if($pagename == 'about'){
    echo '<script type="text/javascript" src="myScript.js"></script>'
}

**leopro** · Feb 22, 2013 05:26

Yeah, so easy.. I should have guessed it

Thank you!

User Tag List

Thread: How To enable button when all chekboxes are checked?

Thread Tools

Display

How To enable button when all chekboxes are checked?

Bookmarks

Bookmarks

Posting Permissions