Rails 4：单击后禁用提交按钮答案

【问题标题】：Rails 4: Disable submit button after clickRails 4：单击后禁用提交按钮
【发布时间】：2014-02-16 14:06:54
【问题描述】：

我有一个form_tag(foo_path(@foo), remote: true, id: 'foo-form' 表单和一个提交按钮submit_tag ("Submit", :id => "foo-submit")

我想在点击提交按钮后禁用它。显然，我不能使用像onlick="jQuery(this).prop('disabled', true);" 这样的东西，因为它会破坏远程功能。我知道 submit_tag 的 :disable_with 数据属性，但它似乎对我不起作用。它确实生成了正确的表单代码，但没有任何效果。我不确定为什么它不起作用，但这可能是因为我同时使用原型（遗留原因）和 jquery。不过，我只为 jquery 加载 ujs 而不是原型。但是，所有其他 query_ujs 功能都运行良好。

还有其他方法可以禁用提交按钮吗？

【问题讨论】：

你在所有 jQuery 命令之前运行jQuery.noConflict(); 吗？这可能会有所帮助。当你检查 DOM 并且没有重复时，你能确认所有的 id 都是正确的吗？
两者都是。但是，我设法通过修改我的代码让 `disable_with' 工作。这可能是由于表单助手中的错误，但我还不确定。
确保您已加载所有需要的库，例如 jquery-rails 等。数据属性“disable-with”应该适用于所有情况。或者有什么具体的事情你做的没有用吗？
@TanelSuurhans 请在下面查看我的回答

标签： jquery ruby-on-rails ruby-on-rails-4 ujs

【解决方案1】：

使用

submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." }

【讨论】：

正如我在帖子中所写，:disable_with 数据属性对我不起作用

【解决方案2】：

submit_tag 的替代品是button_tag。 button_tag 允许您添加一个很棒的字体微调器。

<%= button_tag 'Submit', class: 'btn btn-primary', 
      data: { disable_with: "<i class='fa fa-refresh fa-spin'>
      </i> Submitting Changes..."} %>

【讨论】：

【解决方案3】：

您使用 CoffeeScript 来执行类似以下几行的操作：

jQuery ->
  $('.theform').submit ->
    $('input:submit').attr("disabled", true)

这会在提交带有class="theform" 的表单时禁用表单提交按钮。根据您的需要，您可以调整它以适合表单的类/ID。

【讨论】：

似乎不起作用。只是为了确保我的代码是正确的： jQuery('#foo-form').submit(function () { jQuery('#foo-submit').attr("disabled", true); });你是这个意思吗？
当提交按钮被禁用时，表单将不会在至少某些浏览器下提交，这也是 OP 声明的内容。

【解决方案4】：

由于是ajax调用，所以会触发对应action生成的js.erb文件。

disable-on-click 算法可以放在这个 js.erb 文件中。

# in the controller
def foo_method
...
# will render js.erb for ajax call 
# assuming there is no .html view file in the directory
end

# in foo_method.js.erb
$('input:submit').attr("disabled", true);

它应该带你回到同一个页面，但按钮 nonew 被禁用

【讨论】：

【解决方案5】：

问题是由无效的 HTML 代码引起的。见<div> breaks <form> disable_with 现在可以使用了

【讨论】：

所以基本上你的问题完全在其他地方，你没有提供调试它所需的所有代码。您实际上也没有报告正确的症状 :) 我希望这对您来说是一个很好的调试课程 - 始终首先查明您的问题并确保问题出在您认为的位置。