如何在 asp.net 中使用 Javascript 永久禁用按钮？答案

【问题标题】：How to Permanently Disable a button using Javascript in asp.net?如何在 asp.net 中使用 Javascript 永久禁用按钮？
【发布时间】：2018-01-23 07:42:48
【问题描述】：

我在 asp.net 中使用 javascript 创建了一个倒数计时器。完成时间后，Button1 被禁用，但当我重新加载页面时，倒数计时器被重置，Button1 被启用。

我想在计时器为零时永久禁用Button1。我的代码是：

var tim;
var min = 01;
var sec = 00;
var f = new Date();
function f1() {
  f2();
}

function f2() {
  if (parseInt(sec) > 0) {
    sec = parseInt(sec) - 1;
    document.getElementById("showtime").innerHTML = ""+min+" Minutes ,"+sec+" Seconds";
    tim = setTimeout("f2()", 1000);
  }
  else {
    if (parseInt(sec) == 0) {
      min = parseInt(min) - 1;
      if (parseInt(min) == -1) {
        clearTimeout(tim);
        $("#Button1").prop('disabled', true);
      }
      else {
        sec = 60;
        document.getElementById("showtime").innerHTML = "" + min + " Minutes ," + sec + " Seconds";
        tim = setTimeout("f2()", 1000);
      }
    }
  }
}

<body onload="f1()">
<div><h3>Time will be finished after:</h3>
</div>
<div id="showtime"></div>
<div> <asp:Button ID="Button1" runat="server" Text="Submit"/></div>`
</body>

【问题讨论】：

mmmmmm 一个 cookie
每次刷新页面都会重新开始倒计时
这是我面临的主要问题:( @ashik

标签： javascript jquery html css asp.net

【解决方案1】：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>

<script>
function f2() {
  if (parseInt(sec) > 0) {
    sec = parseInt(sec) - 1;
    document.getElementById("showtime").innerHTML = ""+min+" Minutes ,"+sec+" Seconds";
    tim = setTimeout("f2()", 1000);
  }
  else {
    if (parseInt(sec) == 0) {
     min = parseInt(min) - 1;
       if (parseInt(min) == -1) {
        clearTimeout(tim);
        $("#Button1").prop('disabled', 'true');
        storeValue('disabled', 'true');
       }
       else {
       sec = 60;
       document.getElementById("showtime").innerHTML = "" + min + " Minutes ," + sec + " Seconds";
       tim = setTimeout("f2()", 1000);
       }
     }
   }
 }
 function storeValue(key, value) {
  if (localStorage) {
    localStorage.setItem(key, value);
  } else {
    $.cookies.set(key, value);
  }
 }

function getStoredValue(key) {
  if (localStorage) {
    return localStorage.getItem(key);
  } else {
    return $.cookies.get(key);
  }
}
function f1() {
 f2();
 var model =getStoredValue('disabled');
 if(model == 'true')
 {
   $("#Button1").prop('disabled', 'true');
 }
}
var tim;
var min = 01;
var sec = 00;
var f = new Date();
</script>

使用此代码并使thrid party localstorage 在浏览器中使用

【讨论】：

非常感谢您宝贵的时间和帮助 :) @Saneesh

【解决方案2】：

您可以在定时器关闭时设置 cookie。并且在每个页面加载时检查 cookie 并在需要时禁用该按钮。没有其他办法。

仅供参考：您可以使用相同的 cookie 来禁用服务器端本身的按钮。

【讨论】：

【解决方案3】：

当您重新加载页面时，页面的状态会完全重置，因此就好像有新访问者找到了您的页面，因此您需要能够在两次访问之间存储该状态。

一种解决方案是use a cookie，您可以在计时器到期时设置它，并在页面加载时检查cookie 的存在。如果有，请立即禁用该按钮，无需计时器。

一个更复杂的解决方案是调查在你的服务器上保存会话状态，但我不知道你在服务器端做了什么，所以我不能给你太多。

【讨论】：

【解决方案4】：

Javascript

 document.getElementById("myBtn").disabled = true;

或者如果你需要一个 jquery- 点击

$('.rbutton').on('click',function() {
$(this).prop("disabled",true);
});

【讨论】：

谢谢，但我想在完成时间后永久禁用它。因为，现在它会暂时禁用按钮，但在重新加载网络表单后，按钮再次启用，并且计时器再次从开始开始。