获取带有复选框/提交设置的确认弹出框

时间:2016-10-18 10:36:11

标签: javascript jquery html

我有一个链接/弹出窗口正在使用确认框。但现在需要将其迁移到复选框并提交按钮。我需要一些帮助才能让JQuery与表单一起使用。有什么想法吗?

https://jsfiddle.net/829mf5qx/2/

<!-- Used with JQuery function below -->
    <a href="delete.cfm" onclick="return confirm('Are you sure you want to confirm the order?');">Confirm order?</a>


    <!-- Need to edit the Jquery below to work with this code block -->
    <div style="margin-top:20px;">
    <form name="orderReceived" action="" method="post" onsubmit="return confirm_update();">
        <input type='checkbox' name='files' id='1' value='1' /> Confirm order?
        <br>
        <input type="submit" value="Submit" name="submit">
    </form>
    </div>




    $(document).ready(function() {
        $('a[data-confirm]').click(function(ev) {
            var href = $(this).attr('href');
            if (!$('#dataConfirmModal').length) {
                $('body').append('<div id="dataConfirmModal" class="modal" role="dialog" aria-labelledby="dataConfirmLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="dataConfirmLabel">Please Confirm</h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button><a class="btn btn-primary" id="dataConfirmOK">OK</a></div></div>');
            } 
            $('#dataConfirmModal').find('.modal-body').text($(this).attr('data-confirm'));
            $('#dataConfirmOK').attr('href', href);
            $('#dataConfirmModal').modal({show:true});
            return false;
        });
    });

1 个答案:

答案 0 :(得分:0)

以下是您的解决方案:jsfiddle

$(function(){
    $('#submit').click(function(){
        if($("#checkbox").is(':checked')){
           if(confirm('Are you sure you want to confirm the order?')){
              $('#submitHelper').click();
           }
        }
    });
});