小编mon*_*nom的帖子

我正在一个动态的在线表单网站上工作.在主窗体中,我有多个子窗体,可以动态添加和删除.

<div class='subform'>
    //form fields 
    <input ...>
    ...
    <button class='subform_submit'>
</div>

对于每个子表单,我在子表单的提交按钮上绑定一个AJAX调用,如下所示:

$('#main').on('click', '.subform_submit', function(){
    // Get this subform's user input
    ...
    $.ajax({
        url: ..,
        type: ..,
        data: /* this subform's data */
    });
});

因此,在该页面中,根据用户的选择,我可能有0到10个子表单.我还在页面底部有一个主提交按钮,可以将这些子表单和主表单的数据一起提交.

$('#main').on('click', '#submit', function(e){
    $('.subform_submit').click(); // Submit each subform
    bootbox.confirm({ });
})

单击主提交按钮后,我想显示加载图片,然后显示一个对话框(我bootbox.confirm()在这里使用),直到所有AJAX调用完成.此对话框告诉用户已提交包含子表单的整个表单.但问题是每个AJAX调用可能需要2秒钟才能完成,我不知道调用可能有待完成.如何编写此主提交按钮,以便:

1. 立即显示加载图像,和
2. 所有AJAX调用完成后,隐藏加载图像并显示对话框？

我知道这听起来很有线。目前我有多个复选框，我想让它看起来像单选按钮

以下 CSS 在 IE 中不起作用

input[type='checkbox'] {
-webkit-appearance: radio; /* Chrome, Safari, Opera */
-moz-appearance: radio;    /* Firefox */
appearance: radio;   //how about IE>8 ?
}