禁用表单和所有包含的元素,直到ajax查询完成(或另一个解决方案以防止多个远程请求)

Question

我有一个带有输入和选择的搜索表单,当任何输入/选择被更改时,我运行一些js然后用jquery进行ajax查询.我希望阻止用户在请求进行过程中对表单进行进一步更改,因为他们可以立即启动多个远程搜索,从而有效地导致不同搜索之间的竞争.

似乎最好的解决方案是在等待请求返回时阻止用户与表单交互.目前我正在通过在制作ajax查询之前隐藏表单然后在成功/错误时再次显示它来以最愚蠢的方式执行此操作.这解决了问题,但看起来很糟糕,并不是真的可以接受.是否有另一种更好的方法来阻止与表单的交互？为了使事情变得更复杂,为了允许漂亮的选择,用户实际上与跨越js的跨距进行交互,以将它们绑定到实际的隐藏选择.因此,即使跨度不是输入,它们也包含在表单中并表示表单的实际交互元素.

感谢任何建议 - 最多 这就是我现在正在做的事情:

function submitQuestionSearchForm(){
  //bunch of irrelevant stuff  
  var questionSearchForm = jQuery("#searchForm");
  questionSearchForm.addClass("searching");
  jQuery.ajax({
    async: true, 
    data: jQuery.param(questionSearchForm.serializeArray()), 
    dataType: 'script', 
    type: 'get', 
    url: "/questions", 
    success: function(msg){ 
      //more irrelevant stuff
      questionSearchForm.removeClass("searching");                           
    },
    error: function(msg){ 
      questionSearchForm.removeClass("searching");                           
    }    
  }); 
  return true;
}

"搜索"类目前只有{display:none}

Answer 1

我使用这个插件http://jquery.malsup.com/block/,它实现了一个半透明的img,可以应用于Div或整页,它非常好,支持跨浏览器.

编辑:正如有些人说这个插件不会阻止表单输入,选择等...如果你真的希望它是防弹的,并且不允许人们搞乱你需要实现进一步阻止的表单,我建议使用一个像这样的纯HTML解决方案/sf/answers/2561034451/