Question

我有一个具有javascript验证的Rails Devise表单。当用户按下提交时，验证工作，用户重新聚焦在他们需要的表单上。

但是，rails使用data-disable-with在单击按钮后禁用该按钮，因此在验证后用户无法再单击提交。我试图设置某种监听器来检查按钮何时被禁用，等待一会儿以防止双击，然后重新启用按钮。

我尝试了很多代码迭代，我尝试的最新代码是：

      $(document.on("ajax:success", "new_supplier", function() {
      var button;

      button = $(this).find('.btn-sign-up');
      setTimeout((function() { return button.disabled=false; }),1);


      });

但是没有成功，之前我曾尝试在按钮上添加一个监听器：

      var button = document.getElementById('btn-sign-up');
      button.addEventListener("click", enableButton);

      function enableButton() {
          if (button.disabled)
          {
              window.setTimeout(enable(), 2000);
          }
      }


      function enable() {
          button.disabled=false;
      }

但这失败了，因为它在功能（隐藏在rails ether中）之前运行，禁用了按钮，因此无效。

我的提交按钮很简单：

    <%= f.submit "Create my account", class: 'btn-sign-up', id: 'btn-sign-up' %>

任何人都可以帮助我吗？我想如果我可以为这个可以工作的页面禁用jQuery_ujs，但不确定我是否可以这样做。

Answer 1

此行为在Rails 5中已更改，现在默认情况下禁用提交。

我建议使用以下配置，而不是接受答案：

config.action_view.automatically_disable_submit_tag = false

或者，为特定按钮临时执行此操作，将其添加到提交按钮

data: { disable_with: false }

Answer 2

这有助于给我提示要查找的内容。如果有人在寻找如何在您的html.erb文件中更正此问题，这是我的解决方案：

<p>
  <%= f.submit 'Submit', data: { disable_with: false } %>
</p>

Answer 3

看看我的答案。

$button = $('#someId')
$.rails.enableElement($button)
$button.removeAttr('disabled')

https://stackoverflow.com/a/44318786/4349494

Answer 4

我设法很简单地解决了这个问题。我刚进入并使用代码

从按钮中删除了data-disable-with

    $('#my-button').removeAttr('data-disable-with');

然后在表单准备好提交时重新建立属性，以防止双击创建重复项。

Rails数据禁用 - 重启按钮

4 个答案: