javascript - 按钮在刷新时启用

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

您可以通过将变量设置为 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);
   }
}