jQuery mobile checkbox的事件触发为什么会有两次?

SilvaShi 发布于 2014/10/24 11:40
阅读 1K+
收藏 0

我想要实现的是只有选中了checkbox才能点击下一步

代码如下,为什么我想要将某一个按钮disable掉,就会触发多次change事件和click事件,然后checkbox的值也无法改变呢?


大神求教。。。




<!DOCTYPE html>

<html lang="en">


<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="format-detection" content="telephone=no" />
    <title>北京银行信用卡网络申请</title>
    <link rel="stylesheet" href="css/jquery.mobile.flatui.css">
    <script src="js/jquery.js"></script>
    <script src="js/jquery.mobile-1.4.0-rc.1.js"></script>
    <script>
        $(document).ready(function () {
            $("#nextbutton").on("tap", function () {
                var val = $('input:checkbox[name="checkknow"]:checked').val();
                if (val == null) {
                    $("#nextbutton").attr("href", "#");
                    $("p#warningtext").text("请阅读上述须知并点击同意");
                } else {
                    $("#nextbutton").attr("href", "information.html");
                    $("p#warningtext").text("");
                };
            });


            $("a#test1").on("tap", function () {
                var val = $('input:checkbox[name="checkknow"]:checked').val();
                alert(val);
                $('input[type="checkbox"]').attr('checked', false).checkboxradio("refresh");
                var val = $('input:checkbox[name="checkknow"]:checked').val();
                alert(val);
                $("#nextbutton").attr("data-theme", 'c').button("refresh");
            });


/*
            $("input[type='checkbox']").on("click", function () {
                alert("Tap")
                var val = $('input:checkbox[name="checkknow"]:checked').val();
                if (val == null) {
                    alert("null");
                    //$("input[type='checkbox']").attr("checked",true).chec kboxradio("refresh");
                    //$("#nextbutton").button("disable");
                }else{
                    alert("on");
                }
                //$("#nextbutton").button("diable").button("refresh");
            });
            */
            
            $("input[type='checkbox']").on("click", function () {
                alert("click")
                this.blur();
                this.focus();
            //$("#nextbutton").button("disable");
            })
            
            $("input[type='checkbox']").change(function(){
                alert("Change"); 
                var val = $('input:checkbox[name="checkknow"]:checked').val();
                alert(val);
                if(val == null){
                    $("#nextbutton").button("disable");
                }
            });
            
        });
    </script>
</head>


<body>
    <div data-role="page" id="slide" data-theme="d">
        <div data-role="header">
            <h1>
                申请卡片
            </h1>
        </div>


        <div data-role="content">
            <label for="checkknow">本人同意并遵守须知</label>
            <input type="checkbox" name="checkknow" id="checkknow" data-theme="d" checked="true">
            <button href="#" data-role="button" data-theme="d" id="nextbutton" data-ajax="false">下一步</button>
            <a href="#" data-role="button" data-theme="d" id="test1" data-ajax="false">test</a>
            <p id="warningtext"></p>
        </div>
    </div>
</body>


</html>






加载中
返回顶部
顶部