How To enable button when all chekboxes are checked?

JavaScript
1

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!

2

Hi there leopro,

Welcome to the forums :slight_smile:

You can do it like this:

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

3

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!

4

Yeah, probably.
Are you using a CMS?

5

Yes, I am using WordPress.

6

You can probably do something like this:

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

Yeah, so easy… I should have guessed it :slight_smile:

Thank you!