在 Rails、Coffeescript 中首次单击后禁用链接

Posted 2023-03-03

【中文标题】在 Rails、Coffeescript 中首次单击后禁用链接

【英文标题】：Disable link after first click in Rails, Coffeescript

【发布时间】：2016-09-05 17:19:37

【问题描述】：

第一次点击后应禁用以下链接

<%= link_to "Submit Order", :action => "charge", class: 'btn btn-primary', id: 'confirmButton' %>

以下代码永久禁用链接：

ready = ->

$('#confirmButton').click (e) ->
  e.preventDefault()
  return

$(document).ready(ready)    
$(document).on('page:load', ready) 

如何修改此代码，以便链接在第一次点击时处于活动状态，然后在后续点击时禁用？

【参考方案1】：

你可以在第一次点击后给按钮添加一个禁用的类

$('#confimationButton').on('click', function() 
  if($(this).hasClass('disabled'))
    return;
  // do work
  $(this).addClass('disabled');
);

【参考方案2】：

如果您想更改显示属性（颜色等）但实际上并没有禁用链接，则添加一个类很好。显然设置“禁用”属性也没有。我见过的解决方案都与将链接的“点击”处理程序设置为返回 false 或停止点击操作的传播有关。这篇文章就是一个很好的例子：

disable a hyperlink using jQuery

【讨论】：

我不认为锚标签支持 disabled 属性，但按钮支持。

【参考方案3】：

与Antarr Byrd 的回答略有不同

$('a').on('click', '.disabled', function()
  return false;
);

然后像他提到的那样添加disabled 类

【参考方案4】：

考虑改用按钮； rails 的按钮助手支持 disabled_with data 属性，该属性应在单击按钮后自动禁用。

http://api.rubyonrails.org/classes/ActionView/Helpers/UrlHelper.html#method-i-button_to-label-Data+attributes

这也适用于表单提交助手

http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag-label-Data+attributes

【讨论】：

感谢您的回答。这似乎是使用引擎盖下已经内置的最佳解决方案。

【参考方案5】：

<%= link_to "Submit Order", :action => "charge", class: 'btn btn-primary', id: 'confirmButton', data:  disable_with: "Please wait..."  %>