禁用复选框，直到 iframe 滚动

Question

I suspect this is probably not possible due to browser security, however I have a form at the end of which is an iframe displaying our terms and conditions page. Below is a checkbox for agreeing to these terms and conditions.

Other sites I have seen require you to scroll down in the terms and conditions before the checkbox is active but i suspect this is done with a textarea or scrollable div rather than an iframe.

As such is anyone aware of how you can spot when an iframe has scrolled in javascript or jQuery so I can enable the checkbox once it has been scrolled.

Answer 1

Following code in your embedded document should do it.

 $(window).scroll(function () {
            if ($(document).height() <= $(window).height() + $(window).scrollTop())
                $("#chk", window.parent.document).removeAttr("disabled");
 });

Answer 2

I have not seen a check box automatically become active after scrolling, and actually cannot see the purpose of it. What difference does it make if the checkbox is active or not when it's hidden?

I would also add that I may have misunderstood your question. Do you want the checkbox to become selected after scroll? Again this would be pretty dangerous because you could find that your users end up agreeing to your terms by default because of the code that you are about to write.

Having said all that what you are asking may be answered in the question I asked a while ago here

Answer 3

I'm not sure you can do that (but I'm not sure you can't). Here is an alternate solution for you:

Simply put the checkbox in your iframe . The user will only see it when having scrolled down the iframe .

Hint: you can also put everything in a div with fixed size and overflow-y:scroll in your CSS. Doing this, the checkbox will be in your page.