0

一旦用户滚动到可滚动 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;
}
4

4 回答 4

2

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

<script>
$( document ).ready( function() {
 $('#terms').scroll(function () {
  if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) {
    $('#payment').removeAttr('disabled');
    }
 });
});
</script>
于 2013-10-23T09:15:18.590 回答
2

试试这个 ：

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

演示

于 2013-10-23T09:23:27.313 回答
0 
$( "input[type='checkbox']" ).prop({
  disabled: true
});

那是你想做的吗？

于 2013-10-23T09:07:28.633 回答
0

你只需要使用 .removeAttr() 函数。

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

适用于 x 和 y 卷轴

演示小提琴

于 2013-10-23T09:24:25.437 回答