Ruby on Rails中如何让link_to点击后不禁用 支持多次切换考勤状态

方法1：针对单个link_to禁用自动禁用（最快实现） #

Rails UJS 会默认给设置了remote: true的链接添加点击后自动禁用的逻辑，你只需要给link_to添加data: { disable_with: false }参数即可关闭该行为，修改后的视图代码如下：

<div id="reader-attendance-<%= member.id %>">
  <% if member.present %>
    <%= link_to member.last_name.upcase, attendance_path(id: member.id, present: false), remote: true, class: "btn btn-outline-success btn-14", data: { disable_with: false } %>
  <% else %>
    <%= link_to member.last_name.upcase, attendance_path(id: member.id, present: true), remote: true, class: "btn btn-outline-danger btn-14", data: { disable_with: false } %>
  <% end %>
</div>

该配置仅对当前添加属性的链接生效，不需要修改全局逻辑。

方法2：全局关闭所有remote链接的自动禁用逻辑 #

如果你需要所有remote: true链接都支持重复点击，可以在JS入口文件（通常是app/javascript/packs/application.js）中添加如下配置，修改UJS的默认自动禁用选择器：

// 移除a[data-remote]的自动禁用规则
Rails.ujs.disableSelector = 'input[data-disable-with], button[data-disable-with]'

该配置全局生效，不需要再给每个link_to单独加属性。

button_to的正确实现方式 #

你之前使用button_to不生效是参数传递和路由匹配的问题，正确写法如下：

1. 先确认config/routes.rb中配置了对应POST路由：

post 'attendance/:id', to: 'members#attendance', as: :attendance

2. 修改视图中的button_to代码，明确指定路由参数和禁用自动禁用属性：

<%= button_to member.last_name.upcase, attendance_path(id: member.id, present: !member.present), method: :post, remote: true, class: member.present ? "btn btn-outline-success btn-14" : "btn btn-outline-danger btn-14", data: { disable_with: false } %>

这里简化了判断逻辑，不需要写两套button_to代码。

可选优化：简化控制器逻辑 #

你控制器中的状态更新逻辑可以简化，无需手动写if else判断：

def attendance
  member = Member.find(params[:id])
  # 自动把字符串格式的true/false转成布尔值更新
  member.update(present: ActiveModel::Type::Boolean.new.cast(params[:present]))
  vote_member = VoteMember.find_by(member_name: member.display_name)
  vote_member.update(vote_type: '') if vote_member&.vote_type == 'Absent'
  
  ActionCable.server.broadcast(
    'attendance_channel',
    {
      member_id: member.id,
      present: params[:present],
      vote_member_id: vote_member.id,
      total_abs: Member.where(present: false).count,
      member_name: member.last_name.upcase
    }
  )
  head :ok
end

末尾加head :ok可以告诉UJS请求成功完成，避免潜在的请求异常。

内容的提问来源于stack exchange，提问作者epurdy