• 0

Disable a link unless checkbox is checked?


Question

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

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

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

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

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

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

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
  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.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • You will soon have fewer reasons to open Control Panel in Windows 11 by Taras Buria Good news: more Control Panel bits are making their way to the Settings app, giving you fewer reasons to use the legacy UI that Microsoft buried deep inside its operating system. This time, the company is migrating certain clock-related settings, giving them a more modern look in the Settings app. The upgraded Settings app now lets you enable additional clocks in the notification center and adjust AM/PM indicators. These features work the same as they do in the legacy Control Panel: you can enable up to two additional clocks for two extra time zones and name them as you wish. Thanks to the redesign, the UI for setting up additional clocks supports dark and light themes, bigger UI elements, and improved accessibility. The same goes for the AM/PM indicators: you can customize them in Settings > Time & Language > Language & Region > Regional Format. Other Control Panel bits that recently made their way to the Settings app include some keyboard settings. Microsoft has not confirmed any of those changes yet, so stand by for announcements in future preview builds. Speaking of preview builds, this week, Microsoft released a new Canary build with improved context menus, taskbar changes, new accessibility features, and more. Check out the full release notes here.
    • Everything 1.4.1.1028 by Razvan Serea "Everything" is search engine that locates files and folders by filename instantly for Windows. Unlike Windows search "Everything" initially displays every file and folder on your computer (hence the name "Everything"). You type in a search filter to limit what files and folders are displayed. "Everything" only indexes file and folder names and generally takes a few seconds to build its database. A fresh install of Windows 10 (about 120,000 files) will take about 1 second to index. 1,000,000 files will take about 1 minute. "Everything" will run on Windows XP, Vista, Windows 7, Windows 8, Windows 10 and Windows 11. NTFS indexing requires the Everything service or running "Everything" as administrator. What is the Lite version of "Everything"? The Lite version of Everything is the same as the normal multilingual version of Everything, except it has some features removed: Removed ETP/FTP Server. Removed HTTP Server. Removed IPC. The Command line interface / ES will not work with the Lite version. The SDK will not work with the Lite version. Windows accessibility features and screen readers will not work with the Lite version. Everything 1.4.1.1028 changes: fixed a crash when getting help text from a context menu item that throws an exception. updated localization. "Everything" is Freeware. If you use "Everything" in a commercial environment and find it useful a donation would be appreciated. Download: Everything 1.4.1.1028 64-bit | Portable ~1.0 MB (Freeware) Download: Everything 1.4.1.1028 32-bit | Portable Download: Lite 32-bit | Lite 64-bit View: Everything Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • So you just don't like the statement? That's completely different than the statement not being true. And one doesn't have to be "full of hate" to acknowledge a cow is, in fact, a cow.
    • They are trying to pretend there is demand for this crap. That it's for special, wealthy, niche customers only right now. You know, the Apple marketing model.
  • Recent Achievements

    • Week One Done
      BlakeBringer earned a badge
      Week One Done
    • Week One Done
      Helen Shafer earned a badge
      Week One Done
    • First Post
      emptyother earned a badge
      First Post
    • Week One Done
      Crunchy6 earned a badge
      Week One Done
    • One Month Later
      KynanSEIT earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      669
    2. 2
      ATLien_0
      274
    3. 3
      Michael Scrip
      232
    4. 4
      Steven P.
      163
    5. 5
      +FloatingFatMan
      159
  • Tell a friend

    Love Neowin? Tell a friend!