SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Yerevan, Armenia
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How To enable button when all chekboxes are checked?

    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. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    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?

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Yerevan, Armenia
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by leopro View Post
    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?

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Yerevan, Armenia
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes, I am using WordPress.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,313
    Mentioned
    178 Post(s)
    Tagged
    9 Thread(s)
    You can probably do something like this:

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


  7. #7
    SitePoint Member
    Join Date
    Feb 2013
    Location
    Yerevan, Armenia
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, so easy.. I should have guessed it

    Thank you!


Bookmarks

Posting Permissions

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