javascript - 在Rails中，如何在单击提交按钮后同时禁用文本区域和提交按钮？

Question

我有一个包含文本区域和提交按钮的表单。当用户单击提交按钮时，将使用 AJAX 以 acyshornized 方式提交表单。我想在提交过程中禁用文本区域和按钮。

我尝试将 JS 单击事件绑定(bind)到提交按钮并禁用这两个控件。我的代码在这里:

表格:

<%= form_for @tweet, remote: true do |f| %>
  <%= hidden_field_tag :authenticity_token, form_authenticity_token %>
    <% if @tweet.errors.any? %>
        <div id="error_explanation">
            <h2><%=pluralize(@tweet.errors.count, "error") %> prohibited this article form being saved:</h2>
            <ul>
                <% @tweet.errors.full_messages.each do |msg| %>
                    <li><%= msg %></li>
                <% end %>
            </ul>
        </div>
    <% end %>

    <div class="div_add_text">
        <%= f.text_area :content, id: "textarea_add_tweet" %>
        <%= f.submit class: "pure-button", id: "btn_add_tweet" %>
    </div>

    <div class="div_submit">
    </div>
<% end %>

JS

$(document).ready( function () {
    $("#btn_add_tweet").click(function() {
        $(this).prop("disabled",true);
        $("#textarea_add_tweet").prop("disabled",true);
    });
});

但是，如果我这样做，表单将不会提交。怎样才能达到我想要的效果呢？

Answer 1

您是否尝试过设置超时？ OnClick 在执行按钮的关联操作之前被调用，因此异步禁用应该可以。

$(document).ready( function () {
  $("#btn_add_tweet").click(function() {
    setTimeout(function() {
      $("#btn_add_tweet").prop("disabled",true);
      $("#textarea_add_tweet").prop("disabled",true);
    }, 5);
  };
};

其中 5 是调用函数之前的时间(以毫秒为单位)。