Rails 4视图中如何禁用按钮并彻底阻止其被点击？

问题根因 #

你遇到的两种异常表现是Rails内置辅助方法的特性和HTML规范共同导致的：

• link_to生成的是<a>锚点元素，HTML原生规范中<a>标签没有可生效的disabled属性，你添加的disabled仅为自定义属性，只能配合CSS实现视觉上的禁用效果，Rails UJS绑定的提交、confirm提示等点击事件不会被自动拦截。
• link_to_if在条件不满足时默认直接输出纯文本，不会保留按钮标签和样式，因此会出现普通文本的表现。

推荐解决方案 #

方案1（优先选择）：改用button_to生成按钮 #

button_to生成的是原生<button>元素，disabled属性可原生生效，Rails UJS会自动识别禁用状态的按钮，不会触发任何绑定事件，无需额外配置，代码如下：

<%= button_to 'Submit Form', order_products_path, method: :post, data: {confirm: "Are you sure?"},
            class: 'btn btn-class1', disabled: submit_disable %>

该方案语义更符合提交操作的场景，也不需要额外写CSS兼容，是最优解。

方案2（必须使用<a>标签时选择）：多维度拦截点击事件 #

如果业务场景必须用link_to生成锚点按钮，需要同时处理属性配置和CSS样式：

1. ERB模板代码：动态判断状态，禁用状态下清空交互属性、替换跳转地址：

<%= link_to 'Submit Form', submit_disable ? 'javascript:void(0)' : order_products_path, 
            method: submit_disable ? nil : :post, 
            data: submit_disable ? {} : {confirm: "Are you sure?"},
            class: "btn btn-class1 #{'disabled' if submit_disable}", 
            disabled: submit_disable %>

2. 新增CSS规则拦截点击事件，现代浏览器均支持该配置：

a.btn.disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.6;
}

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