• 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

    • Apple iOS 26 beta has a hidden iPhone ringtone

      By NeoV2 · Posted

      I thought I could download the ringtone.
    • Foxconn to make iPhone casings in India as Apple shifts more production from China

      By Sagar Naresh · Posted

      Foxconn to make iPhone casings in India as Apple shifts more production from China by Sagar Naresh Bhavsar It was recently reported that Donald Trump was unhappy with Tim Cook and threatened Apple with a 25% tariff if iPhones weren't produced in America. While the exact reason is unclear, some speculated that Trump's anger had to do with Cook skipping the Middle East trip with him, which was attended by other major company CEOs. Many believed that Apple came under the radar because of its plans for a $1.5 billion iPhone production plant in India. True or not, Apple is facing a tough situation as Trump has already imposed hefty tariffs on China, where the majority of iPhones are made. In a move to reduce dependence on China, Apple planned to shift its production from China to India, where tariffs are relatively lower. In line with this, a fresh report by The Economic Times suggests that Apple's iPhone assembler, Foxconn, has decided to start producing iPhone casings in India. Sources claim that a new unit is being planned at the ESR Industrial Park in Oragadam, Tamil Nadu. The area is close to the upcoming display module manufacturing plant. Until now, Tata Electronics was the one producing iPhone casings in India. However, Foxconn, which was assembling iPhones in the country at its plant in Sriperumbudur, will start making iPhone casings as well. This move suggests that Foxconn is helping Apple move more production out of China to India. Prabhu Ram, vice president, industry research group, CyberMedia Research, said, Foxconn has already ramped up its India push. The company recently started production of Apple AirPods in Hyderabad for exports and is also setting up an iPhone production plant in Bengaluru. Casings only make up about 2-3% of the total iPhone cost, making them locally helps Apple reduce costs, and also helps avoid hefty tariffs.
    • Is the Start menu in Windows actually useful? Do we even need it?

      By NeoV2 · Posted

      I loved the initial compact Start Menu present in Windows 10. It was tiny, awesome and super fast without any Store apps clutter.
    • BBC threatens Perplexity with legal action over content scraping

      By zikalify · Posted

      BBC threatens Perplexity with legal action over content scraping by Paul Hill Image via Depositphotos.com The UK’s public broadcaster, BBC, has written a letter to Perplexity, the AI search startup, asking it to stop scraping articles from its websites, delete existing copies of content, and propose some sort of financial compensation if it would like to carry on scraping data. If the demands are not met, BBC may seek an injunction against the startup citing alleged misuse of its intellectual property. BBC is probably responding in this way because it has seen other news organizations cement deals with firms like OpenAI and Mistral. The income stream allows news organizations to raise more funds and also cover the costs of the extra load on their servers caused by AI scraping. For anybody not familiar with Perplexity, it’s a bit like ChatGPT but has a much stronger emphasis on searching the web to find information. You can ask it anything you want to know about and it very quickly searches online and constructs a specific response to your question based on what it has found. The company offers many of its features for free, but does have Perplexity Pro, which costs money. Essentially, Perplexity is making money from publishers by using their content to improve its own product, but not paying them all. Perplexity's defense and existing publisher programs In a statement to the Financial Times, Perplexity labeled the BBC’s claims as "manipulative and opportunistic". The startup accused the broadcaster of having “a fundamental misunderstanding of technology, the internet and intellectual property law.” This is not the first time Perplexity has had a run-in with the media. Forbes and Wired accused it of plagiarizing content from their websites and The New York Times sent the company a cease and desist notice to stop using its content for AI purposes. To assuage publishers, Perplexity has set up a revenue sharing program, which includes TIME, Fortune, Der Spiegel, and others. According to Digiday, the revenue share was up to 25%. It’s not clear if BBC has tried engaging through this avenue or if it wants to try to squeeze the startup for a bigger slice. The escalating battle over AI and intellectual property Even if you only keep up with AI developments in passing, you’ll likely have seen that AI models need to be trained on vast amounts of data, much of which is copyrighted. There is an ongoing debate about whether these companies should be allowed to train on this data, or first seek out permission from the copyright holders. The move from the BBC could spur other publishers on to try and get themselves a better deal from Perplexity. Alternatively, Perplexity could remove BBC content from its platform and stop pulling information from there. It could probably find most of the information elsewhere, but if Perplexity tried to pull this too much it would eventually end up pretty useless with not a lot of content. Overall, this is just one of many ongoing legal issues surrounding AI, but once a conclusion has been reached, it could set a precedent about how AI companies should go about getting content from publishers. Source: FT via Reuters
    • Steam overlay's FPS counter gets major upgrade to show CPU and VRAM usage, temps, and more

      By dustojnikhummer · Posted

      No, it's in fact not always there. You have to enable the FPS overlay first, either in Steam general settings or in the.... Steam Overlay... which is Shift+Tab. And what is that? A keyboard shortcut

  • Recent Achievements

    • 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
    • Week One Done
      Wayne Robinson earned a badge
      Week One Done
    • One Month Later
      Karan Khanna earned a badge
      One Month Later

  • Popular Contributors

    1. 1
      +primortal
      678
    2. 2
      ATLien_0
      274
    3. 3
      Michael Scrip
      220
    4. 4
      +FloatingFatMan
      171
    5. 5
      Steven P.
      160
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!