Question

我的HTML页面中有2个按钮，第一个是启用的，第二个是禁用的，当我点击第一个按钮时，第一个被禁用，第二个被启用，同样的使用第二个按钮，当我单击第二个按钮时（当启用此功能时），第一个按钮被禁用，这是完全正常的。在我意外刷新时，我发现了这个问题。

我点击第一个按钮，第二个按钮启用，禁用第一个按钮。刷新后，它进入初始状态，即第一个被启用，第二个被禁用。

下面是一段代码。

<tr>
    <td>SubTask</td>
    <td>
       <select id="subtask" name="subtask">
           <option value="Subtask">Subtask</option>
       </select>
    </td>
</tr>
<tr>
    <td><input type="button" value="Start" name="Start" id="Start" /></td>
    <td><input type="button" value="Stop" name="Stop" id="Stop" disabled="disabled" /></td>
</tr>



<script type="text/javascript">
    $(document).ready(function() {
        var form = $('#formSec');
        var task = document.getElementById('task');
        var subtask = $('#subtask');
        $('#Start').on("click", function() {
            $.ajax({
                type : "post",
                url : "UpdateStartTime",
                data : form.serialize(),
                success : function() {
                    $('#task').attr("disabled", true);
                    $('#subtask').attr("disabled", true);
                    $('#Start').attr("disabled", true);
                    $('#Stop').attr("disabled", false);
                }
            });
            return false;
        });

        $('#Stop').on("click", function() {
            var form = $('#formSec');
            var task = document.getElementById('task');
            var subtask = $('#subtask');
            $.ajax({
                type : "post",
                url : "UpdateEndTime",
                data : form.serialize(),
                success : function() {
                    $('#task').attr("disabled", false);
                    $('#subtask').attr("disabled", false);
                    $('#Start').attr("disabled", false);
                    $('#Stop').attr("disabled", true);
                }
            });
            return false;
        });

    });
</script>

上面js中添加了一些发布功能，请忽略它。

Answer 1

U可以通过将变量设置为localStorage来实现此目的。这将使您有机会访问触发按钮。

如：

$('#Start').on("click", function() {
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("clickStat", "start");
  }
});

类似地..

$('#Stop').on("click", function() {
  if (typeof(Storage) !== "undefined") {
    localStorage.setItem("clickStat", "stop");
  }
});

以这种方式进行访问：

if (typeof(Storage) !== "undefined") {
   var stat = localStorage.getItem("clickStat");
   if(stat == "start"){
     $('#Start').attr("disabled", true);
     $('#Stop').attr("disabled", false);
   }else{
     $('#Start').attr("disabled", false);
     $('#Stop').attr("disabled", true);
   }
}

Answer 2

更新按钮状态时，请将其保存到localStorage：

localStorage.setItem("btn1enabled", false);
localStorage.setItem("btn2enabled, true);

然后，当您加载页面时，您可以根据

启用/禁用按钮

localStorage.getItem("btn1enabled");和localStorage.getItem("btn2enabled");

给你。

（注意：localStorage在第一次加载页面时没有保存任何内容，所以你必须在代码中考虑这种情况）

刷新

2 个答案: