Question

我试图在用户滚动到可滚动div的底部后启用复选框。

它的条款和条件我在这里得到了类似问题的一些代码，但似乎无法让它发挥作用。

我的文件顶部有一些jQuery：

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

然后我的div包含了TnC的

            <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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam lacinia est non cursus rutrum. Donec vulputate tincidunt mollis.</span>

复选框位于表单标签中我只是节省了时间。

我在这里看不出任何错误但是当我向下滚动TnC时没有任何反应

建议只在这里为div元素添加CSS

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

Answer 1

这是一个愚蠢的错误。使用.ready()函数。代码是：

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

Answer 2

试试这个：

$(document).ready(function () {
    $('#terms').scroll(function (e) {
        if ($(this).scrollTop() + $(this).innerHeight() >= $(this)[0].scrollHeight) {
            $('#payment').removeAttr('disabled');
        }
    });
});

<强> Demo

Answer 3

$( "input[type='checkbox']" ).prop({
  disabled: true
});

你想做什么？

Answer 4

您只需要使用.removeAttr（）函数。

$(document).scroll(function(){
   $("#payment").removeAttr("disabled");
});

适用于x和y滚动

Demo Fiddle

如何启用向下滚动复选框？

4 个答案: