• 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

    • BBC threatens Perplexity with legal action over content scraping

      By RejZoR · Posted

      Someone not paying the BBC license at home is a minor inconvenience to BBC. The real problem are these Ai companies STEALING data through scraping and then selling it under their product. Just pirating something for personal use is nowhere near as bad as stealing it to make corporate profits.
    • Vivaldi 7.4.3684.55

      By Copernic · Posted

      Vivaldi 7.4.3684.55 is out.
    • Nvidia and Foxconn planning to deploy humanoid robots within months

      By zikalify · Posted

      Nvidia and Foxconn planning to deploy humanoid robots within months by Paul Hill Never mind intellectual work, Foxconn and Nvidia are now in talks to deploy humanoid robots at Foxconn’s new Houston factory to carry out physical work, Reuters has reported. The two companies want to have the robots operational by the first quarter of 2026. This is a big development for both companies; it marks the first time Nvidia products will be made with robot assistance, and the first time Foxconn has used robots in an AI server factory on a production line. While the development is certainly interesting, and potentially bad for factory workers, we do not know many of the details such as which robots are being planned for use at the factory, what they’ll look like, or how many will be deployed. While Foxconn has trialed robots made by Chinese firm UBTech, the report states that Foxconn is developing its own robots with Nvidia. The news was told to Reuters via unnamed sources who are not allowed to discuss the matter, so they did so under anonymity. They said that the robots will start work early next year and will contribute to the production of Nvidia’s GB300 AI servers. Foxconn has been training the robots to pick and place objects, insert cables, and do assembly work, but it’s not clear exactly what their role will be on the factory floor and whether jobs will be impacted. One of the sources that spoke to Reuters said that the Houston factory was the best place to trial the robots because it is more spacious, giving robots more room to move about. Last month, a Foxconn subsidiary, which is in charge of the group’s AI server business, said there were two robots being developed which are expected to be showcased in November. One of the robots will have legs, while the other will use a wheeled autonomous mobile robot base. Predictably, the latter version will cost less money than the one with legs, but pricing is unknown at this point. Reuters noted that these two businesses are not the only ones working on robots. It also said that Mercedes-Benz and BMW have been testing robots on production lines and that Tesla is developing its own robots too. China is also getting heavily invested in the sector. Jensen Huang, head of Nvidia, believes that they will be in wide use in manufacturing facilities within five years.
    • Elon Musk once again claims Tesla robotaxis are coming soon

      By Astra.Xtreme · Posted

      That's great and all, but humans have a finite range of vision and a rather slow reaction time. I live in a rural area too and the roads are painted with dear carcasses most of the year. It's not because people choose to hit them. A human simply can't react quick enough when they come firing out of the woods perpendicular to your vision. Those issues can and are being solved with machine vision. The industrial world has been doing this for many years already and cars are finally jumping on the bandwagon using the same technology. It's a known fact that driving is the most dangerous thing (most) people do every day, and that's solely because humans are driving. It's one thing to use technology to be lazy, but it's another to use it to be safe and save lives.
    • Microsoft is removing legacy drivers from Windows Update

      By nekrosoft13 · Posted

      Microsoft doesn't make AMD drivers. The "AMD" driver on Windows update comes from AMD, its AMD decision to put it there.

  • Recent Achievements

    • 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
    • One Month Later
      gowtham07 earned a badge
      One Month Later
    • Collaborator
      lethalman went up a rank
      Collaborator

  • Popular Contributors

    1. 1
      +primortal
      673
    2. 2
      ATLien_0
      274
    3. 3
      Michael Scrip
      218
    4. 4
      +FloatingFatMan
      165
    5. 5
      Steven P.
      163
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!