jQuery Rails 4：单击后禁用提交按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21812230/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rails 4: Disable submit button after click
提问by Albert
I have a form_tag(foo_path(@foo), remote: true, id: 'foo-form'form and a submit button submit_tag ("Submit", :id => "foo-submit")
我有一个form_tag(foo_path(@foo), remote: true, id: 'foo-form'表单和一个提交按钮submit_tag ("Submit", :id => "foo-submit")
I'd like to disable the submit button after it has been clicked. Obviously, I cannot use something like onlick="jQuery(this).prop('disabled', true);"because it would break the remote functionality. I'm aware of the :disable_withdata attribute for the submit_tag but it doesn't seem to work for me. It does generate the right form code but it has no effect. I'm not sure why it doesn't work but it might be due to the fact that I use prototype (legacy reasons) and jquery at the same time. Though, I only load ujsfor jquery and not for prototype. However, all other query_ujsfeatures work very well.
我想在单击后禁用提交按钮。显然，我不能使用类似的东西，onlick="jQuery(this).prop('disabled', true);"因为它会破坏远程功能。我知道:disable_withsubmit_tag的数据属性，但它似乎对我不起作用。它确实生成了正确的表单代码，但没有效果。我不确定为什么它不起作用，但可能是因为我同时使用原型（遗留原因）和 jquery。虽然，我只加载ujsjquery 而不是原型。但是，所有其他query_ujs功能都运行良好。
Is there another way to disable the submit button?
还有其他方法可以禁用提交按钮吗？
采纳答案by Albert
The problem was caused by invalid HTML code. See <div> breaks <form>disable_withworks now
该问题是由无效的 HTML 代码引起的。见<div> 中断 <form>disable_with现在有效
回答by dileep nandanam
use
用
submit_tag "Submit", id: "foo-submit", data: { disable_with: "Please wait..." }
回答by Steve
An alternative to the submit_tagis the button_tag. The button_tagallows you to add a font awesome spinner.
的替代方法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..."} %>
回答by murrekatt
You use CoffeeScript to do something like these lines:
您可以使用 CoffeeScript 来执行类似以下几行的操作：
jQuery ->
$('.theform').submit ->
$('input:submit').attr("disabled", true)
This disables the form submit button when the form with class="theform"is submitted. Depending on your need you adjust this to fit with your class/id for the form.
这将在提交表单时禁用表单提交按钮class="theform"。根据您的需要，您可以调整它以适合您的表单类/ID。
回答by Vic
Since it is an ajax call, the resultant js.erb file from the corresponding action will be triggered.
由于它是一个 ajax 调用，因此将触发相应操作的结果 js.erb 文件。
The disable-on-click algorithm can be placed inside this js.erb file.
禁用点击算法可以放在这个 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);
It should bring you abck to the same page with the button noew disabled
它应该将您带回同一页面，同时禁用 noew 按钮
