javascript - 带有复选框和链接的 jQuery 模式对话框

Question

我已经尝试解决这个问题好几天了(我认为这是作为新手的考验!)所以非常欢迎您的帮助。

jscript 小部件显示“继续”按钮。当用户单击按钮时，我需要一个模式对话框来显示一条消息(包含协议(protocol)文档的超链接)和一个复选框，供用户确认他们已阅读协议(protocol)。关闭对话框后，如果 checkbox = 0，则“继续”按钮将打开相同的对话框(循环，直到单击复选框:checkbox = 1)。

这是我到目前为止收集到的代码...

对于对话框:

<a href="#" id="sdHc3" rel="simpleDialog3">Click to open dialog</a>  
<span style="display:none;" id="checkboxStatus"></span>

<div style="display:none;" id="simpleDialog3">
    <h3>Terms and Conditions</h3>
    <form id="checkboxForm">
        Please check box to confirm that you have read the <a href="assets/docs/agreement.html">agreement</a>: <input type="checkbox" class="chckbx" value="1" />
    </form>
    <p><a href="#" class="close">Close</a></p>
</div>


<script type="text/javascript">
$('#sdHc3').simpleDialog({
    showCloseLabel: false,
    open: function () {
        $('#checkboxStatus').html('');
    },
    close: function () {
        var c = [];
        $('#checkboxForm :checkbox:checked').each(function () {
            c.push($(this).val());
        });
        $('#checkboxStatus').html('Checked ' + c.join(', ') + '.').show();
    }
});
</script>

以及检测小部件按钮上的点击:

<script type = "text/javascript">
document.body.onmousedown = function (e) {
    var query = window.location;
    var anchor1=query.hash.substring(1); //anchor without the # character
    if( ($(event.target).hasClass("gwt-Button")) && (anchor1=="step3"))
    {
        alert("Widget button clicked");
    }
}
</script>

“对话框”代码工作正常，小部件按钮单击检测代码也工作良好。目前，如何将这些结合起来并实现目标对我来说是一个谜。提前致谢!

Answer 1

因此，当单击小部件按钮时，您需要查看是否检查了输入，如果没有，则再次显示对话框，如下所示:

$(document).ready(function() {
    // detect button click
    $('.gwt-Button').click(function(ev) {
        ev.preventDefault();
        var anchor = window.location.hash.substring(1); // remove # character
        if (anchor != "step3") {
            return; // not step 3
        }
        if ($('#checkboxForm .chckbx').is(':checked')) {
            // checked
        }
        else {
            $('#sdHc3').click(); // trigger dialog again
        }
    });

    // setup dialog
    $('#sdHc3').simpleDialog({
        showCloseLabel: false,
        open: function () {
           $('#checkboxStatus').html('');
        },
        close: function () {
            var c = [];
            $('#checkboxForm :checkbox:checked').each(function () {
                c.push($(this).val());
            });
            $('#checkboxStatus').html('Checked ' + c.join(', ') + '.').show();
        }
    });
});