When should the checkbox be enabled for the user on a terms and conditions page after scrolling to the bottom?

  • Here is a sample of my HTML code with a div class:

    <div id="terms">
    <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
    </p>

    <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
    </p>
    <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis. Aenean elementum adipiscing lorem. Sed vitae volutpat ante. Aliquam pretium sem arcu, ac consequat enim blandit eget. Integer posuere arcu vulputate nisi interdum dignissim. Sed quis tortor risus. Vivamus leo lectus, ornare sed vehicula quis, hendrerit eu mi. Curabitur pulvinar luctus nibh, ut laoreet dolor venenatis et. Curabitur eu nulla congue, iaculis tellus sit amet, blandit lorem. Vestibulum rhoncus non augue eu cursus. Etiam neque neque, commodo id accumsan ac, auctor nec nunc.
    </p>

</div>

<input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I agree to terms and conditions</span>

  • The CSS I am using is:

#terms {width: 780px;height: 150px;overflow-y: scroll;border:2px solid #ccc;}

I am looking for help with the JS or JQuery code to enable the checkbox when the user has scrolled to the bottom of the Terms and Conditions page. I have tried other solutions without success, as the checkbox remains disabled regardless of what I do.

javascriptjqueryhtmlcsscheckbox

Answer №1

To implement the functionality, you can make use of the following script:

<script>
$( document ).ready( function() {
 $('#terms').scroll(function () {
  if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
    $('#payment').removeAttr('disabled');
    }
 });
});
</script>

For a live demonstration, check out this link: https://jsbin.com/fohokifuxi/edit?html,js,output

Answer №2

I may not be an expert in Jquery, but with a little help from Google, I was able to come up with this example. Hopefully, it serves its purpose!

jQuery(function($) {
  $('#terms').on('scroll', function() {
    if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
      $('#payment').removeAttr("disabled")
    }
  })
});
#terms {
  width: 780px;
  height: 150px;
  overflow-y: scroll;
  border: 2px solid #ccc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="terms">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis...

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

refresh a distinct area of a webpage

Currently, I am working with PHP, AJAX, and jQuery. When posting a status, the update is done using AJAX and PHP to avoid full page reloading. However, I am facing an issue where I want the newly posted status to be visible alongside the existing statuses. ...

phpjquerymysqlajax

Fresh Redux shop in stealth mode

I am managing a Single Page Application using React and Redux. Some customers have expressed interest in keeping two separate instances open with distinct credentials (one in normal view and one in incognito mode on Chrome). As both instances can access t ...

javascriptreactjsgoogle-chromereduxincognito-mode

Conceal the second testimonial in owl-carousel on screens smaller than 1200px

Currently, I am working with a carousel feature that displays 2 testimonials per slide. I have set it up so that when the screen size is at least 1200px, 2 testimonials are shown. However, when the screen size drops below 1200px, only one testimonial shoul ...

htmlcss

How come React-Native isn't displaying successfully retrieved data using Axios?

I recently installed axios using the command below: npm i axios After writing the code below, I encountered an issue where React-Native doesn't display any data or throw any errors: import React, {useState, useEffect} from 'react'; import a ...

javascriptreactjsreact-nativeaxios

What is the speed of the jscript garbage collector? Rotating Matrices in Three.js

Utilizing these two functions enables me to rotate objects within my three.js scenes: // Rotate an object around an arbitrary axis in object space function rotateAroundObjectAxis(object, axis, radians) { rotationMatrix = new THREE.Matrix4( ...

javascriptmemory-managementgraphicsgarbage-collectionthree.js

Triumph with Ajax in Rails 3!

Hello, I am new to Rails and have a question. I have links set up to perform ajax queries to the server: <%= link_to g.name, g, :class => 'link link-to-gallery', :remote => true %> I also have a JavaScript view that loads data from ...

ruby-on-railsajaxruby-on-rails-3jqueryruby-on-rails-3.2

What is the best way to make the <li> move down when displaying a hidden div?

I'm currently attempting a task that I'm unsure is possible. Within my li elements, I have hidden divs containing additional content. When I click on an li, the corresponding div is displayed below with a 100% width. However, instead of pushing ...

jquerycss

Showing information in a CodeIgniter view with a formatted table

Hi there, I'm currently facing an issue with sorting the correct <td> to display subject results for students. We have a total of 11 subjects offered in the school and senior students are supposed to take 8 subjects, as 4 of them are electives a ...

phphtmlhtml-tabletablerow

Styling Lists in HTML/CSS: How to Highlight an Entire Row with a Background Color When Using list-style?

I've been working on revamping the menu layout on my website. Currently, I am using a list with a circle style type to display the menu options. Here's a glimpse: Here is the code snippet: <li class='category'><a href=' ...

htmlcsshtml-listsstyling

Trouble arises when attempting AJAX call to PHP file resulting in failed MySQL execution accompanied by errors

Having some trouble identifying the issue here. It seems quite simple, but I'll highlight it here anyway. On a basic website, I have a form for user registration where I'm using AJAX to send data to register.php. The form and AJAX code are as fol ...

phpjquerymysqlajax

Generating a variety of Audio Tags within a container and streaming MP3 files

I have an ajax request that retrieves base64 Mp3 data from my database. When I successfully retrieve a single base64 data, I am able to play the mp3 using an audio tag. However, when I receive multiple base64 data entries, I need to create and link each ...

javascriptjqueryajaxhtml5-audio

Update the chosen option in a dropdown list with jQuery and javascript

I need to set the value of a column in a repeater so that once it's assigned, the column will display the current selection from the dropdown. I have the correct value to assign in $('#myname_' + rowIndex).text(), but when I try to assign t ...

javascriptjqueryasp.net

Why is my jQuery $.ajax success function not providing any results?

When checking the Network tab in Chrome, I noticed that the correct data (action, username, password) is being sent, but the message is not returning to $('#return_login'). Can anyone spot what might be wrong with my code? Below is the jQuery co ...

javascriptphpjqueryajax

Encountering a 500 Error when Sending Handsontable Data to an ASP.NET Function via Ajax

I'm facing Error 500 Internal Error when trying to send Handsontable data to an ASP.NET Code Behind function using Ajax. I am unsure of what mistakes I may be making. Can someone provide assistance? Here is my Ajax Code: function SaveData() { ...

c#jqueryasp.netajax

Verify if the YouTube video is currently playing and execute the script

Currently, I have a video embedded on my WordPress website using the following code: <iframe id="video" width="640" height="360" src="http://www.youtube.com/embed/xxxxxx?enablejsapi=1" frameborder="0" allowfullscreen></iframe> This video is c ...

jqueryyoutubeyoutube-api

Exploring and accessing information with ajax and php

I'm in a bit of a coding dilemma and could really use some prompt assistance to complete my project. I've managed to retrieve all the data from the database, but when I try to click on the view button, the details don't appear in the modal f ...

javascriptphpajaxfunction

Use CSS to place a checked icon within a div containing an image

I have a set of images where clicking on them reveals a green checkmark icon. However, I am struggling to position it correctly. .p-t-md{ padding-top:20px; } .p-l-md{ padding-left:20px; } .speakers_list { width: 605px; margin: 0 auto; height: 245px; ove ...

htmlcss

Extract certain text from an element using a straightforward script

Is there a way to simplify this JavaScript code for splitting specific text from an element? Here is an example of the HTML element: <div id="ReviewBox"> <span>(By:) Hello</span> <div id="ReviewBox"> <span>By: Goodbye</ ...

javascriptjqueryhtmltextsplit

Using a nested table will override the "table-layout: fixed" property

I'm currently working on creating a tabular layout and I'm in need of the following: 2 columns with variable widths Columns that are equal in width Columns that are only as wide as necessary After some research, I discovered that by setting "t ...

htmlcsshtml-table

Enhance your Syncfusion experience by incorporating tooltips into circle gauge pointers

I have been exploring the Syncfusion documentation but have not been able to figure out how to add tooltips to the pointers of the Syncfusion Circle gauge. Since the gauge utilizes a canvas for drawing and the Syncfusion library is quite complex, I haven ...

javascriptasp.net-mvcsyncfusion