• 0

Disable a link unless checkbox is checked?

Asked by Malik6,

 Share

Question

Enthusiast

Malik6

Posted
Posted

I have instructions I want the user to read before they can get access to a link. Is it possible to place a check box there and make sure the user clicks the checkbox first then the link becomes enabled otherwise it is disabled for them to continue?

I hope that was clear and that someone can help.

8 answers to this question

Recommended Posts

  • 0
Enthusiast

SummerWolf

Posted
Posted

You can use a mixture of jQuery and JavaScript to do this.

Based on what you have said, I'm going to assume that you have some kind of form than handles the data (having a link isn't very handy as a user can just bypass the validation and use the URL bar to navigate to it). The following is an example using jQuery that inserts the submit button element into a div that is ready for it. If the checkbox is then 'unticked', the submit button will be removed.

<html>
   <head>
      &lt;script type="text/javascript" src="jquery-1.5.min.js"></script>&lt;/head&gt;

   &lt;body&gt;

      &lt;form name="my_form" action="some_page.html" method="post"&gt;
         &lt;input type="checkbox" name="thing" id="thing" /&gt;

         &lt;div id="accept"&gt;

         &lt;/div&gt;
      &lt;/form&gt;

      &lt;script type="text/javascript"&gt;
         /* Waits for the checkbox to be ticked */
         $('#thing').click(function() {

            /* Makes sure that the checkbox is going to be 'ticked' when clicked */
            if($(this).attr('checked') == true)

               /* Adds the submit button into the DOM */
               $('#accept').append('&lt;input type="submit" value="Submit" id="accepted_submit"&gt;');

            else

               /* If the button is unticked, the submit button is removed */
               $('#accept').empty();
         });   
      &lt;/script&gt;

   &lt;/body&gt;
&lt;/html&gt;

If you have any text inputs within the form, you're going to want to prevent the use of the return key (as it can submit the form on any element); an example of which can be found here: http://www.bloggingdeveloper.com/post/Disable-Form-Submit-on-Enter-Key-Press.aspx.

Hope that helps.

  • 0
Enthusiast

Malik6

Posted
  • Author
Posted

Thanks Jag,

I looked at what you provided but the link wasn't working that you gave. Also, the head section is trying to pull jquery-1.5.min.js but not sure where to get that js file?

When I tried placing your code the submit button doesn't appear and I believe it's because the js file is missing. Can you provide that? I'd love to give this a try.

  • 0
Enthusiast

SummerWolf

Posted
Posted

Ah yes of course. I'd forgotten to use jQuery's link. I have my own copy of the .js file as it makes things easier for me. Just use this line instead:

&lt;script src="https://code.jquery.com/jquery-latest.js"></script>

Also, the link I provided contains a full-stop (period) at the end. It shouldn't be there (sorry for not noticing it!). To be honest, seeing as you are only displaying T&C's (or whatever) I'm going to guess that there aren't any text inputs that can be called into focus by the user. If there aren't, you can just forget about disabling the return key.

I have tested the code myself and it works so let me know how you get on!

  • 0
Enthusiast

Malik6

Posted
  • Author
Posted

So I tried placing the following in the head

&lt;script src="https://code.jquery.com/jquery-latest.js"></script>

And this portion in the body:

      &lt;form name="my_form" action="continue.html" method="post"&gt;
         &lt;input type="checkbox" name="thing" id="thing" /&gt;
I've read the instructions provided above. 
         &lt;div id="accept"&gt;

         &lt;/div&gt;
      &lt;/form&gt;

      &lt;script type="text/javascript"&gt;
         /* Waits for the checkbox to be ticked */
         $('#thing').click(function() {

            /* Makes sure that the checkbox is going to be 'ticked' when clicked */
            if($(this).attr('checked') == true)

               /* Adds the submit button into the DOM */
               $('#accept').append('&lt;input type="submit" value="Submit" id="accepted_submit"&gt;');

            else

               /* If the button is unticked, the submit button is removed */
               $('#accept').empty();
         });   
      &lt;/script&gt;

When I click the check box, the submit button does not appear. Am I doing something wrong? Does the js need to be local or is there something I'm missing?

  • 0
Enthusiast

SummerWolf

Posted
Posted

I have just tested your code on my local machine and it works fine. The jQuery file doesn't need to be local.

The only thing I can think of is something that may be conflicting with the global handlers that jQuery uses. I have come across this problem before when I'm including stuff like Lightbox (which uses the prototype.js library). Change the '$' signs to 'jQuery'. So the code will look like this:

 &lt;form name="my_form" action="continue.html" method="post"&gt;
         &lt;input type="checkbox" name="thing" id="thing" /&gt;
I've read the instructions provided above. 
         &lt;div id="accept"&gt;

         &lt;/div&gt;
      &lt;/form&gt;

      &lt;script type="text/javascript"&gt;
         /* Waits for the checkbox to be ticked */
         jQuery('#thing').click(function() {

            /* Makes sure that the checkbox is going to be 'ticked' when clicked */
            if(jQuery(this).attr('checked') == true)

               /* Adds the submit button into the DOM */
               jQuery('#accept').append('&lt;input type="submit" value="Submit" id="accepted_submit"&gt;');

            else

               /* If the button is unticked, the submit button is removed */
               jQuery('#accept').empty();
         });   
      &lt;/script&gt;

If that doesn't work, could you please paste the entire HTML code you're using so I can get a better idea of where it's going wrong. I know that the jQuery isn't the problem as it works perfectly on my machine.

EDIT: I have found your problem. I provided an incorrect jQuery link. Use this one instead:

&lt;script src="https://code.jquery.com/jquery-1.5.min.js"></script>

Talk about running around in circles! I do apologise. I swear that doesn't usually happen ;)

  • 0
Grand Master

Mathachew Veteran

Posted
  • Veteran
Posted

To add to the discussion, the reason why jQuery 1.6 would not work, but 1.5 does is because of a change introduced in 1.6. More detailed info can be found here: http://api.jquery.com/prop/

An annoying and seemingly improper change imho.

  • 0
Enthusiast

SummerWolf

Posted
Posted
  On 24/06/2011 at 21:11, Mathachew said:

To add to the discussion, the reason why jQuery 1.6 would not work, but 1.5 does is because of a change introduced in 1.6. More detailed info can be found here: http://api.jquery.com/prop/

An annoying and seemingly improper change imho.

Indeed, I've just read up on it. There's another thing to remember.

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • Mozilla fixes graphics issues in Firefox on Nvidia systems

      By Nandiman · Posted

      HDR?
    • What browser do you prefer to use, and why?

      By Matthew S. · Posted

      Personally I use Chrome however I have Edge and Firefox installed as I inherently still test my websites in multiple browsers thanks to the IE era...
    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By Yonah · Posted

      That I cannot do, for validity is the basis of use; I have licenses only for Home and Pro.
    • As Windows 10 support winds down, KDE welcomes "Windows 10 exiles" to Linux

      By Yonah · Posted

      I do not think you did cover all the scenarios.
    • Is Polaroid's Now 3rd Gen camera worth the $99.99 price drop?

      By zikalify · Posted

      Is Polaroid's Now 3rd Gen camera worth the $99.99 price drop? by Paul Hill For at least a decade there has been a nostalgic feeling gripping people in response to the digitization of everything. We’ve seen this mainly in products like vinyl, and even apps like Slowly that make you wait before your friends receive your “letter”. Another such product trying to capitalize on nostalgia is the Polaroid Now 3rd Generation camera. For a limited time, you can pick it up for just $99.99, instead of $119.99. If you are still searching for a gift for Father’s Day, taking advantage of this limited-time deal would be our suggestion. The Polaroid Now 3rd Generation is available in several colors but only four - Black, Coral, Purple, and Yellow - are available for $99.99, and they all look great. While there is certainly nothing wrong with snapping photos on your phone and storing them in the cloud, you do lose out on the tactileness of a photograph that you get with the Polaroid Now 3rd Generation. Additionally, in recent years, Google has been nagging everyone that their Google Photos storage is about to run out, urging you to delete photos or pay to upgrade, in future clean ups, you might accidentally delete a photo you really wanted to keep, you can’t do that as easily with hard-copy photograph. What it does (and doesn’t) With the 3rd generation of Polaroid Now, you get several improvements over the predecessor. There is a better light meter, upgraded two-lens autofocus, a built-in tripod mount, photo filter compatibility, a self-timer to take snaps with yourself included, and double-exposure modes. This camera remains faithful to the iconic Polaroid design but comes with new colors, four of which are now $99.99 for a limited time. Environmentalism has become all the rage in recent years and consumers want stuff that’s produced more responsibly; to this end, Polaroid has used 40% recycled materials to reduce waste and improve the product’s carbon footprint. The Polaroid Now 3rd Generation uses Polaroid i-Type Film and 600 Film, both of which are sold separately. The cost of the film is probably the biggest issue with this product, it’s priced at $17.99 per 8-pack, so you’re definitely going to want to be mindful about the shots you take. You can cut the cost by buying in bulk. Some of the reviewers were also disappointed with the low-light shots they took indoors. If you are planning to take indoor shots, then be mindful about what other people have said. Outdoors, everything seems in order. The two-lens autofocus system mentioned earlier is a key new feature of this camera. The system combines two fixed focus zones with one lens covering distances from 0.40 meters to 1.3 meters, and the other covering from 1.0 meter to infinity. The camera then automatically switches lenses depending on the best one for the shot. With the self-timer, you can now set up the Polaroid Now 3rd Generation on a tripod and join in with a group photo, or just take a shot of yourself. The double exposure feature lets you layer two images on one piece of film to bring out your creativity to create visually striking and unexpected results. How it compares At this discounted price, the Polaroid Now 3rd Generation is the same price as the 2nd Generation model, but gets newer features. It should also be stated that there’s a Polaroid Now+ 3rd Generation which you can connect to your phone to control with an app, but it’s priced higher. If you’re just looking for a camera that doesn’t complicate things, then the Polaroid Now 3rd Generation is the ideal model. You get the new hardware features, but don’t need to worry about extra connectivity. Who it’s right for The Polaroid Now 3rd Generation is ideal for casual photographers, those looking to snap memories to tangible film, gift-givers looking to buy a parent a Father’s Day gift, or those who love the classic Polaroid aesthetic and want it on a shelf somewhere for decorative purposes. While the camera is now priced well at $99.99, buyers need to consider the on-going cost of the film, which can add up. For anyone who hasn’t used a film camera before, it’s also important for me to point out that prints take a bit of time to develop, some users have also complained about the low-light performance when indoors. If you’re looking for snapping retro outdoor shots, the Polaroid Now 3rd Generation is definitely worth your consideration! Polaroid Now 3rd Generation (Black): $99.99 (Amazon US) - MSRP $119.99 / 17% off Polaroid Now 3rd Generation (Coral): $99.99 (Amazon US) - MSRP $119.99 / 17% off Polaroid Now 3rd Generation (Purple): $99.99 (Amazon US) - MSRP $119.99 / 17% off Polaroid Now 3rd Generation (Yellow): $99.99 (Amazon US) - MSRP $119.99 / 17% off This Amazon deal is US-specific and not available in other regions unless specified. If you don't like it or want to look at more options, check out the Amazon US deals page here. Get Prime (SNAP), Prime Video, Audible Plus or Kindle / Music Unlimited. Free for 30 days. As an Amazon Associate, we earn from qualifying purchases.

  • Recent Achievements

    • First Post
      m10d earned a badge
      First Post
    • Conversation Starter
      DarkShrunken earned a badge
      Conversation Starter
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter

  • Popular Contributors

    1. 1
      +primortal
      251
    2. 2
      snowy owl
      157
    3. 3
      ATLien_0
      140
    4. 4
      +FloatingFatMan
      139
    5. 5
      Xenon
      128
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!