Rails 表单：点击后 - 禁用链接答案

【问题标题】：Rails forms: after click - disable linkRails 表单：点击后 - 禁用链接
【发布时间】：2011-09-23 14:53:47
【问题描述】：

我在 may rails 应用程序中有更多表单，带有标准的“保存”和“更新”按钮。首次点击此链接后如何使此按钮无效（禁用）？

【问题讨论】：

标签： javascript ruby-on-rails forms

【解决方案1】：

这太晚了，但我发现它很有用。

有时:disable_with在 Rails 中不起作用。为此，您必须检查是否在您的 gemfile 中添加了 jquery-rails gem。

然后使用'data-disable-with' => "SUBMITTING" 选项。

【讨论】：

【解决方案2】：

如果你想用 javascript 来做，那为什么不使用事件委托呢？

$(document.body).delegate("form.active","click",function(){
    this.className = "clicked";
});

这会将点击事件委托给页面中具有活动类的每个表单（同样，您可以通过使用不同的上下文将其限制为容器中的每个表单，即 $("#container").delegate(... ) 或省略活动类）并将类从活动更改为单击

$(document.body).delegate("form.clicked","submit",function(e){
    e.preventDefault();
});

这会将提交事件委托给页面上的每个表单，其中 className 为 clicked，并停止提交表单。

或者，您可以使用第一个委托函数将提交事件直接绑定到表单本身（因此将上述两个函数替换为以下函数）。

$(document.body).delegate("form","click",function(){
    $(this).submit(function(e){
        e.preventDefault();
        e.stopPropagation();
    })
});

【讨论】：

【解决方案3】：

您可以将 disable_with 选项与 form_tag 和 form_for 助手一起使用在form_tag的情况下，可以使用

submit_tag "Complete sale", :disable_with => "Please wait..."

form_for的情况下，可以使用

   f.submit 'Create', :disable_with => "Creating..."

来源：http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-form_tag

【讨论】：

这在 rails 3 和 4 中已被弃用
data: { disable_with: "Creating..." } 是在 Rails 4 中执行此操作的方法。

【解决方案4】：

使用 jquery 你可以让它变得非常简单

$('form').submit(function(){
$('input[type=submit]', this).attr('disabled', 'disabled');
});

以上内容查找所有表单，并在单击提交后禁用提交按钮。这是首选方法，因为输入按钮也会触发提交。

【讨论】：