• 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

    • LibreOffice 25.2.4 by Razvan Serea LibreOffice is the free power-packed Open Source personal productivity suite for Windows, Macintosh and Linux, that gives you six feature-rich applications for all your document production and data processing needs: Writer, Calc, Impress, Draw, Math and Base. Support and documentation is free from our large, dedicated community of users, contributors and developers. You, too, can also get involved! Choosing Between LibreOffice Still and LibreOffice Fresh: LibreOffice Still is a good choice if you value stability, a longer support cycle, and a more conservative approach to software updates. It's suitable for businesses and organizations where reliability and compatibility are crucial. LibreOffice Fresh is ideal if you're an enthusiast or an early adopter who wants to stay on the cutting edge of LibreOffice development and is willing to accept more frequent updates and occasional minor issues. Features: Writer is the word processor inside LibreOffice. Use it for everything, from dashing off a quick letter to producing an entire book with tables of contents, embedded illustrations, bibliographies and diagrams. The while-you-type auto-completion, auto-formatting and automatic spelling checking make difficult tasks easy (but are easy to disable if you prefer). Writer is powerful enough to tackle desktop publishing tasks such as creating multi-column newsletters and brochures. The only limit is your imagination. Calc tames your numbers and helps with difficult decisions when you're weighing the alternatives. Analyze your data with Calc and then use it to present your final output. Charts and analysis tools help bring transparency to your conclusions. A fully-integrated help system makes easier work of entering complex formulas. Add data from external databases such as SQL or Oracle, then sort and filter them to produce statistical analyses. Use the graphing functions to display large number of 2D and 3D graphics from 13 categories, including line, area, bar, pie, X-Y, and net - with the dozens of variations available, you're sure to find one that suits your project. Impress is the fastest and easiest way to create effective multimedia presentations. Stunning animation and sensational special effects help you convince your audience. Create presentations that look even more professional than the standard presentations you commonly see at work. Get your collegues' and bosses' attention by creating something a little bit different. Draw lets you build diagrams and sketches from scratch. A picture is worth a thousand words, so why not try something simple with box and line diagrams? Or else go further and easily build dynamic 3D illustrations and special effects. It's as simple or as powerful as you want it to be. Base is the database front-end of the LibreOffice suite. With Base, you can seamlessly integrate into your existing database structures. Based on imported and linked tables and queries from MySQL, PostgreSQL or Microsoft Access and many other data sources, you can build powerful databases containing forms, reports, views and queries. Full integration is possible with the in-built HSQL database. Math is a simple equation editor that lets you lay-out and display your mathematical, chemical, electrical or scientific equations quickly in standard written notation. Even the most-complex calculations can be understandable when displayed correctly. E=mc2. LibreOffice also comes configured with a PDF file creator, meaning you can distribute documents that you're sure can be opened and read by users of almost any computing device or operating system. LibreOffice also comes configured with a PDF file creator, meaning you can distribute documents that you're sure can be opened and read by users of almost any computing device or operating system. Download: LibreOffice 64-bit | LibreOffice 32-bit ~300.0 MB (Open Source) View: LibreOffice Website | Screenshot | Release Notes Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • I'm not sure why, but for some reason I think that if they are deciding to use the year for the version history they should use the whole year (i.e. iOS 2026).
    • Here's why it makes sense to name it iOS 26 and why it doesn't by Aditya Tiwari It has been almost 18 years since Apple launched the first version of its popular mobile operating system alongside the original iPhone. Recent reports and rumors circulating on the web suggest that the company is all set to unveil a major overhaul for iOS 19 at this year's WWDC keynote. There is something that baffled many when they found that the Cupertino giant is reportedly planning to rename iOS 19 to iOS 26. Yes, a company like Apple skipping eight versions for iOS is enough to leave users with a "why?" expression on their face. However, even if Apple pulls it off, there are two sides to the coin. Why it makes sense to call it iOS 26 There are several reasons why calling it iOS 26 instead of iOS 19 isn't as weird as it sounds. To begin with, it's something that has been done in the past. Samsung is a well-known example when we think about renaming device lineups and skipping version numbers. Samsung launched the Galaxy S20 series in 2020. But what was its predecessor? Galaxy S19? No, it was the Galaxy S10. The South Korean giant renamed its device lineup and aligned it with the year of launch, jumping ten versions in the process. So, someone viewing a Galaxy S23 can easily determine that the device was launched in 2023. It also gives them a feeling that they are using the 'latest and greatest' product. On the flip side, a device from the previous year may feel outdated, potentially motivating them to upgrade. Skipping version numbers isn't fun and games for everyone. Microsoft became the butt of jokes when it skipped Windows 9 and announced that Windows 8.1 will be upgraded to Windows 10 (that too in 2015). Windows 10 was thought to be "the last version of Windows", but things turned out differently. Apple's case would be a bit different, where the iOS version number is one year ahead. So, iOS 26 will release in 2025, iOS 27 in 2026, and so on. This approach is similar to how game companies like Electronic Arts name their gaming titles. Although it may seem off track, the naming scheme aligns with Apple's development schedule. The company typically announces new iOS versions at WWDC in June and rolls them out to the public in the fall season. After that, it continues to push incremental updates through the following year. In other words, a particular iOS version lives on your iPhone for a quarter of the launch year and about nine to ten months in the following year. Meanwhile, Samsung releases new Galaxy S devices at the start of the year, so it makes more sense to align their name with the current year. Not just iOS 26, reports said that Apple will streamline its confusing software naming system by renaming almost all of its operating systems to a single version. So, there will be iPadOS 26, macOS 26, tvOS 26, and watchOS 26 instead of iPadOS 19, macOS 16, tvOS 12, and so on. While the big move will make things easier for users, it will also highlight the work Apple has been doing to unify its software experience across devices. iOS and iPadOS have been related to each other from the beginning, but macOS gained ARM support in 2020 and began incorporating iOS-like UI elements. Apple has already developed a suite of Continuity features that enable different Apple devices to work together. macOS 14 Sonoma further bridged the gap between iPhone and Mac in 2023 with a revamped widgets picker UI, which allows access to and syncing with widgets stored on your iPhone. New widgets introduced in macOS 14 are interactive, similar to those on iPhone. They let you do stuff like checking off reminders, playing or pausing media, accessing smart home controls, and more. Apple's iOS 26/iOS 19 would be the second major naming shake-up in the history of iOS. The first one was when Apple renamed the operating system from iPhone OS to iOS in June 2010. iOS 26 is expected to be the biggest update in years, reportedly featuring a 'dramatic' glass-like UI overhaul, a revamped Camera app, live translation for AirPods, a new gaming app, and a new set of accessibility features. The glass-like design, first introduced on Apple's Vision Pro headset, is expected to make its way to tvOS and watchOS. Why doesn't it make sense to call it iOS 26 It already feels a bit awkward when you realize that the iPhone 16 runs iOS 18, for whatever reason, when the first iterations of both iPhone and iOS arrived in the same year. Adding eight more digits to the iOS version number will make it sound even weirder. The 19th generation of iPhone's operating system will be called iOS 26. Imagine buying an iPhone 17 later this year, and it runs iOS 26 out of the box. However, there are a couple of things Apple can do to tone down the awkwardness. Perhaps Apple can rename the iPhone series and start calling it iPhone 26 to match its software counterpart. A far-fetched and even more unlikely option is to drop version numbers from the iPhone's name entirely. Apple is already doing it for its tablets (iPad, iPad Pro, and iPad Air) and its Mac computers. Therefore, it won't be an issue once the users absorb the initial shock of the announcement. But we can't ignore that not having a version number tied to a product has its downsides. These are all speculations anyway. Whatever happens, Apple fans will get over it and learn to live with it, like they are living with the hopes of an upgraded Siri and AirPower to charge their Apple devices together.
    • I'd prefer the disclaimer being more transparent by putting it above the article.
    • dBpoweramp Music Converter 2025-06-05 by Razvan Serea Audio conversion perfected, effortlessly convert between formats. dBpoweramp contains a multitude of audio tools in one: CD Ripper, Music Converter, Batch Converter, ID Tag Editor and Windows audio shell enhancements. Preloaded with essential codecs (mp3, wave, FLAC, m4a, Apple Lossless, AIFF), additional codecs can be installed from [Codec Central], as well as Utility Codecs which perform actions on audio files. After 21 days the trial will end, reverting to dBpoweramp Free edition (learn the difference between Reference and dBpoweramp Free, here). dBpoweramp is compatible with Windows 10, 8, 7, Vista, both 32 and 64 bit. dBpoweramp Music Converter features: Convert audio files with elegant simplicity. mp3, mp4, m4a (iTunes / iPod), Windows Media Audio (WMA), Ogg Vorbis, AAC, Monkeys Audio, FLAC, Apple Lossless (ALAC) to name a few! Multi CPU Encoding Support Rip digitally record audio CDs (with CD Ripper) Batch Convert large numbers of files with 1 click Windows Integration popup info tips, audio properties, columns, edit ID-Tags DSP Effects such as Volume Normalize, or Graphic EQ [Power Pack Option] Command Line Encoding: invoke the encoder from the command line DSP Effects - process the audio with Volume Normalize, or Sample / Bit Rate Conversion, with over 30 effects dBpoweramp is a fully featured mp3 Converter dBpoweramp integrates into Windows Explorer, an mp3 converter that is as simple as right clicking on the source file >> Convert To. Popup info tips, Edit ID-Tags are all provided. dBpoweramp Music Converter 2025.06.05 changelog: Darkmode added Core Converter Debug log dumps ID Tags written VST Effect Folders dialog fixed missing InitCommonControls would not show correctly FLAC/Ogg/Opus/etc - allows editing of CDTOC ID Tag CD Ripper secure ripping log where shows TOC was not showing CD Extra correctly CD Ripper was incorrectly setting data track length on main display (for certain drives) CD Ripper internally better handling of corrupt TOCs CD TOC to Tag was incorrectly adding 150 to CD Extra disc CD Ripper shows "AccurateRip Unconfigured" in rip status rather than "not in accuraterip" if unconfigured CD Ripper art paste accepts https CueSheet added as standard - log file written to same folder as cue and folder.jpg AIFF internal code merge (macos >> windows) Download: dBpoweramp Music Converter R2025.06.05 | 82.2 MB (Shareware) View: dBpowerAMP Music Converter Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
  • Recent Achievements

    • Week One Done
      abortretryfail earned a badge
      Week One Done
    • First Post
      Mr bot earned a badge
      First Post
    • First Post
      Bkl211 earned a badge
      First Post
    • One Year In
      Mido gaber earned a badge
      One Year In
    • One Year In
      Vladimir Migunov earned a badge
      One Year In
  • Popular Contributors

    1. 1
      +primortal
      495
    2. 2
      snowy owl
      255
    3. 3
      +FloatingFatMan
      252
    4. 4
      ATLien_0
      227
    5. 5
      +Edouard
      191
  • Tell a friend

    Love Neowin? Tell a friend!