Javascript：禁用浏览器后退按钮上的 HTML Select 选项问题答案

【问题标题】：Javascript: disabling HTML Select option issue on browser back-buttonJavascript：禁用浏览器后退按钮上的 HTML Select 选项问题
【发布时间】：2018-03-23 14:06:05
【问题描述】：

如标题所示，我正在努力解决我认为微不足道的问题：当我单击预先考虑的单选按钮时，禁用 HTML 选择标记列表中的选项。
我的代码确实有效，但是当用户点击浏览器后退按钮时，我的函数不再被调用，因此现在可以从列表中选择以前禁用的选择器。正如this topic 中所建议的那样，当我使用 PHP 按下后退按钮时，我宁愿避免重新加载 HTML 页面。

这是我的 Javascript 代码：

$(function () {
    $("#radioButton1").on("click", function () {
        $("#selector3").prop("disabled", false);
    });

    $("#radioButton2").on("click", function () {
        var selector = $("#selector3");

        selector.prop("disabled", true);
        selector.css("background", "#dddddd");

        $("#orderByList").val("1");
    });
});

【问题讨论】：

您应该在更改 URL 之前保存用户选择并在页面加载时检查保存的值
但这不能解决我的问题：按下后退按钮使用网页的缓存版本，所以我已经保存了用户选择。在我的第二页中，我有一个主页按钮：使用它可以解决我的问题。不过，如果用户选择通过上述浏览器按钮返回，那么真正的问题就会出现。
默认禁用选择，然后在您点击页面时使用脚本启用它。如果它使用的是页面的缓存版本并且在您点击后退按钮时没有运行脚本，那么这将解决您的问题。
查看这段代码很难判断哪里出了问题。你能提供一个工作小提琴吗
我找到了一个 Javascript 解决方案。我将在答案中发布参考。

标签： javascript jquery html drop-down-menu

【解决方案1】：

您可以尝试使用 $(function () {}); 之外的函数吗？阻止

<script>
$("#radioButton1").on("click", function () {
        $("#selector3").prop("disabled", false);
    });

    $("#radioButton2").on("click", function () {
        var selector = $("#selector3");

        selector.prop("disabled", true);
        selector.css("background", "#dddddd");

        $("#orderByList").val("1");
    });
</script>

绑定只能在标签中完成

【讨论】：

【解决方案2】：

我在this answer 找到了一个可行的解决方案。

window.addEventListener("pageshow", function (event) {
    var historyTraversal = event.persisted || (typeof window.performance !== "undefined" && window.performance.navigation.type === 2);

    if ( historyTraversal ) {
        // Handle page restore.
        window.location.reload();
    }
});

【讨论】：