• 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

    • Samsung Galaxy S25 Edge sales are apparently terrible

      By dustojnikhummer · Posted

      From this very article, thought I got no source on that, I haven't been following this personally (aside knowing they did launch an ultrathin) An earlier rumor had claimed that Samsung will be increasing the production of its foldable units and will phase out the upcoming S26 Plus in favor of the S26 Edge. However, the latest news out of South Korea might make Samsung rethink its strategy.
    • Acronyms....

      By +Raze · Posted

      Victory eludes greedy, evil tyrants and becomes lonely everlasting sadness.  
    • Windows 11 is getting unexpected new customization feature

      By thartist · Posted

      Just WHY... I wonder if some executive really pushed for this to come up because of SOME REASON that bothered the dude... Or maybe so that it doesn't overlap with the OCD in some handheld, something like that?
    • OneDrive search is currently broken for many users

      By TarasBuria · Posted

      OneDrive search is currently broken for many users by Taras Buria If you are trying to find a certain file in your OneDrive storage, but the service just won't give you the stuff you need, you are likely experiencing an issue that Microsoft has just confirmed. The company updated the official OneDrive documentation with a list of known bugs to clarify that the service currently exhibits problems with the search functionality. According to Microsoft, the bug affects four platforms: Windows, iOS, Android, and Web (macOS users are spared). The company says that affected users see black search results, and the storage does not return files that certainly exist (do not blame Microsoft if OneDrive cannot find the file you accidentally deleted or renamed). Fortunately, files are intact—it is just the search that cannot find them and present them to you. Another good thing is that the issue does not appear to affect 100% of users. Microsoft says only "a subset of users" experience the bug. Neowin checked a bunch of systems with personal and work OneDrive accounts, and all of them found the requested files without any issues. Unfortunately, if you are affected, there is nothing you can do at this point. Microsoft made it clear that there are no workarounds. Therefore, you will have to manually scavenge your OneDrive folders (they can now be colored!) to search for the needed file. Microsoft added that it understands how disruptive this bug could be, and it is "working with urgency" to resolve the bug as quickly as possible. You can check out the list of known OneDrive bugs and their possible workarounds in the official support document. In other news about OneDrive frustration, Microsoft recently locked out a user who was attempting to move a bunch of important data from old hard drives to OneDrive. Eighteen attempts to resolve the issue led to nothing but automated replies from Microsoft. You can read more about that wild story here.
    • Nvidia and Foxconn planning to deploy humanoid robots within months

      By ExPat · Posted

      If anyone thinks bringing manufacturing back will result in a bazillion jobs should heed this information. They will be plants full of robots with human supervisors. It’s the only way the products have a chance to be affordable.

  • 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
      672
    2. 2
      ATLien_0
      271
    3. 3
      Michael Scrip
      229
    4. 4
      Steven P.
      166
    5. 5
      +FloatingFatMan
      161
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!