当我在浏览器中按回时，为什么现在按钮缺少它的禁用属性？

Posted 2023-02-21

我去一页。允许用户继续签出的特定按钮（我们称其为按钮A）目前处于禁用状态（应该如此）。

我单击另一个将我带到另一个页面的按钮，以输入我的地址详细信息。完成此操作后，一旦将我发送回该位置，则会启用前一个按钮上的已禁用按钮。

但是，我没有填写我的地址详细信息，而是按了浏览器的BACK按钮并返回到上一个屏幕。按钮A不再被禁用。当我通过浏览器进行检查时，它甚至没有禁用的属性。如果刷新浏览器，则按钮A再次被禁用。

这是按钮的代码，是simple_form_for的一部分

= f.button :button, "Continue to checkout options", class: "btn btn-primary btn-rounded shopping-methods-continue js-checkout-submit", disabled: @basket.requires_address?

@basket.requires_address?当我返回时没有被调用。

我曾尝试对disabled: "disabled"进行硬编码以查看会发生什么，但是按BACK后它甚至还没有禁用的属性。

此页面的缓存是否存在问题？

我已经围绕项目进行了挖掘，特别是在javascript方面。 js-checkout-submit不受任何代码的影响。

有任何想法吗？

答案

因此，我们通过使用turbolinks解决了这个问题。

我们为按钮提供了新的js-disable-button类。

然后在代码（咖啡脚本）的底部添加这些说明：

$(document).on 'turbolinks:load', () ->
  if "#@basket.requires_address?"
    $('.js-disable-button').attr('disabled': 'disabled');

因此，基本上，每次加载页面时都会执行@basket.requires_address?检查，即使按BACK也是如此。如果检查返回true，则该按钮将被禁用。

这提供了解决方案，但是我从来没有真正弄清楚为什么问题首先发生。