Question

前段时间我在这里找到[如何启用向下滚动div的复选框] [1]。

一切都很好，一切都奏效了。虽然几个月后它停止工作，我无法弄清楚原因。

通过“停止工作”我的意思是当我向下滚动到div的底部时，复选框仍保持禁用状态。

没有回应，也没有明显的错误

我只想要一个可滚动的div来启用一个复选框，当用户滚动到div的底部时。

            <script>
            $( document ).ready( function() {
             $('#terms').scroll(function () {
              if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
                alert('dfdsafds');
                $('#payment').removeAttr('disabled');
                }
             });
            });
            </script>
            <h4><a href="JavaScript:cartPopup('tnc.php')">Terms and Conditions of Sale</a></h4>
            <p>In order to continue with your online purchase, you must agree to the terms and conditions of sale. <a href="JavaScript:cartPopup('tnc.php')">Click here</a> to view the terms and conditions of sale.</p>
            <div id="terms">
                <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec vulputate felis, sed dignissim neque. Cras sit amet metus consectetur, ultricies ligula ac, imperdiet turpis. Nulla bibendum viverra velit, nec aliquam ipsum malesuada et. Aenean condimentum sollicitudin dolor, eget suscipit velit. Sed ultrices suscipit hendrerit. Fusce facilisis tellus ac pulvinar rutrum. Aenean semper lacus erat, vitae dignissim mauris faucibus sit amet. Pellentesque mattis leo vitae nisi dignissim, at lobortis risus feugiat. Vestibulum convallis mi ac hendrerit tempus. Maecenas vitae ligula ligula. Mauris nec egestas ipsum. Donec blandit ante in elit porttitor, eu pretium massa tempor. Vestibulum eu sapien lacus. Aliquam at interdum nisl. Nulla aliquam ante at est ullamcorper tristique. Vestibulum aliquet pharetra blandit. 
                </p>

                <p>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nec vulputate felis, sed dignissim neque. Cras sit amet metus consectetur, ultricies ligula ac, imperdiet turpis. Nulla bibendum viverra velit, nec aliquam ipsum malesuada et. Aenean condimentum sollicitudin dolor, eget suscipit velit. Sed ultrices suscipit hendrerit. Fusce facilisis tellus ac pulvinar rutrum. Aenean semper lacus erat, vitae dignissim mauris faucibus sit amet. Pellentesque mattis leo vitae nisi dignissim, at lobortis risus feugiat. Vestibulum convallis mi ac hendrerit tempus. Maecenas vitae ligula ligula. Mauris nec egestas ipsum. Donec blandit ante in elit porttitor, eu pretium massa tempor. Vestibulum eu sapien lacus. Aliquam at interdum nisl. Nulla aliquam ante at est ullamcorper tristique. Vestibulum aliquet pharetra blandit. 
                </p>
            </div>
            <form style="width:800px;float:left;" action="<?=$PHP_SELF;?>" method="post">
                <input id="payment" type="checkbox" disabled name="terms"> <span class="redSmall">I confirm I have read and agree to the terms and conditions. (Must be ticked to continue)</span>
            <!-- PayPal Logo --><img style="float:right;" src="https://www.paypalobjects.com/webstatic/mktg/logo/AM_SbyPP_mc_vs_ms_ae_UK.jpg" width="170" border="0" alt="PayPal Acceptance Mark"><!-- PayPal Logo -->
                <p>Select Payment Method</p>

                <select id="paymentType" name="payment" style="width:200px;">
                    <?php if(isset($_SESSION['username']) && $_SESSION['userActive'] == 1){?><option value="2">Account</option><?}?>
                    <option value="1">PayPal</option>
                </select>                   
            </form>

有人在这里看到我遗漏的问题吗？目前滚动div不会启用复选框。

这是一个小调试信息。

如果我在此行$( document ).ready( function() {

下面放置了一条javascript警报

它在页面加载时成功发出警报。到目前为止一切顺利

如果我在此行$('#terms').scroll(function () {

下面发出提醒

当我尝试向下滚动任何数量的div时，它会成功发出警报。到目前为止一切都很好。

当我把它放在IF语句if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {

中时

什么都没发生。这告诉我IF的条件没有得到满足。但是这段代码适用于CodePen或JSFiddle，我看不出任何问题。

Answer 1

$(window).scroll(function()
{
    if ( $(this).scrollTop()  >= $("#terms").height())
    {
          $('#payment').prop({disabled: false});
    }
});

EXAMPLE

Answer 2

$(window).scroll(function()
{
    if (document.body.scrollHeight - $(this).scrollTop()  <= $(this).height())
    {
          $('#payment').prop({disabled: false});
    }
});

EXAMPLE

Answer 3

我实际上找不到一个错误。我试过你的代码，它对我有用。 http://codepen.io/anon/pen/RNMExm

我添加了CSS规则以使<div>可滚动，也许这就是解决方案...... 如果不想有这个规则，你不应该检查div的滚动，而是检查身体的滚动。

在div滚动上启用JQuery启用复选框

3 个答案: