启用“条款和条件”滚动窗口中的复选框不起作用

时间:2015-05-18 08:17:21

标签: javascript jquery

我的复选框开始时会被选中,即使它被设置为false。每当我滚动时,复选框都会被检查,不会通过if语句。

https://jsfiddle.net/7mujuvn3/1/

$(document).ready(function () {
    //checkbox
    $('#box').attr('checked', 'false');
        $("#terms").scroll(function () {
            //the room for scrolling is 30px in the textarea
            if ($("#terms").scrollTop() === 30) {
                $('#box').attr('checked', 'true');
            } else {
                $('#box').attr('checked', 'false');
            }
        });
    });

1 个答案:

答案 0 :(得分:1)

您应该删除truefalse周围的引号,在所有情况下都使用prop,并在scrollTop后使用括号将其作为方法运行。此外,您可能希望使用>来检查scrollTop,因为如果它同时大于或小于30,则会再次取消选中此框。

https://jsfiddle.net/7mujuvn3/4/

$(document).ready(function () {
    //checkbox
    $('#box').prop('checked', false);

    $("#terms").scroll(function () {
        //the room for scrolling is 30px in the textarea
        if ($("#terms").scrollTop() > 30) {
            $('#box').prop('checked', true);
        } else {
            $('#box').prop('checked', false);
        }
    });
});
#terms {
    width: 300px;
    height: 180px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="" id="terms" cols="30" rows="10">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid
    at dignissimos doloribus explicabo suscipit vero! Aliquam beatae, cumque dignissimos eum expedita, in maxime neque optio quae quidem quos ut?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto aut blanditiis deserunt doloribus ea, eaque impedit laborum minima non officiis placeat quasi quidem repudiandae. At dolores explicabo inventore necessitatibus</textarea>
<input id="box" type="checkbox" checked="">