• 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

    • Illegal streaming boom traced to jailbroken Amazon Fire Stick devices

      By PeterTHX · Posted

      Fixed
    • Bill Gates says he'll donate 99 percent of his wealth to Africa

      By neufuse · Posted

      ah yes, the person who thinks Bill Gates is a plant for Monsanto........
    • The official Funny Pictures thread

      By +Edouard · Posted

    • Meta announces 20-year nuclear energy partnership to support its data centres

      By Fiza Ali · Posted

      Meta announces 20-year nuclear energy partnership to support its data centres by Fiza Ali Meta announced a 20-year partnership with Constellation Energy today to secure nuclear power from the Clinton Clean Energy Center, reinforcing its commitment to clean energy for its data centre operations. Meta’s data centres lie at the heart of its global operations, powering everything from social media platforms to artificial intelligence technologies. As demand for AI accelerates, these facilities require vast and consistent amounts of electricity to maintain performance, reliability, and uptime. Meta currently matches its electricity consumption with 100% clean and renewable energy. As energy demands increase, particularly due to the growth of AI workloads, the company is incorporating additional energy sources such as nuclear power to maintain a consistent supply. Under the agreement, which begins in 2027, Meta will purchase 1,121 megawatts of emissions-free nuclear electricity from the Clinton plant in Illinois. The deal includes an additional 30 megawatts of capacity to the local grid and will help maintain the long-term operation of the facility without relying on state subsidies. It also supports over 1,100 local jobs and contributes $13.5 million annually in tax revenue. In parallel with the Constellation agreement, Meta is progressing its previously announced Request for Proposals (RFP) for new nuclear capacity. Since the RFP was launched early this year, the company has received more than 50 qualified submissions from utilities, developers, and nuclear-technology manufacturers spanning over 20 states. Meta has shortlisted several projects with the aim of developing between 1 and 4 gigawatts of new nuclear capacity. These projects are intended to accelerate development where execution is feasible and timelines are clear. Through both the Constellation agreement and its ongoing RFP process, Meta is positioning nuclear energy as a key component of its long-term energy strategy. This approach forms part of the company's "Tripling Nuclear Pledge," through which it aims to amplify the market for nuclear power in the United States.
    • Bill Gates says he'll donate 99 percent of his wealth to Africa

      By Krieg · Posted

      I'm sure the war lords will be thrilled.

  • Recent Achievements

    • Week One Done
      jrromero17 earned a badge
      Week One Done
    • One Month Later
      jrromero17 earned a badge
      One Month Later
    • Conversation Starter
      johnwin1 earned a badge
      Conversation Starter
    • One Month Later
      Marwin earned a badge
      One Month Later
    • One Year In
      fred8615 earned a badge
      One Year In

  • Popular Contributors

    1. 1
      +primortal
      223
    2. 2
      snowy owl
      156
    3. 3
      ATLien_0
      135
    4. 4
      Xenon
      127
    5. 5
      +FloatingFatMan
      125
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!