【问题标题】：Javascript for keeping buttons disabled even after refreshing即使在刷新后也保持禁用按钮的 Javascript
【发布时间】：2014-03-09 07:04:30
【问题描述】：

我有一个按钮，当您单击它时它会被禁用，但是当我刷新页面时它仍然应该被禁用。我该怎么做？

<button onclick="this.disabled = true">Disable</button>

【问题讨论】：

标签： javascript button refresh

【解决方案1】：

您应该使用cookies。页面刷新后，Javascript 不会保留页面状态（当然，除非你在做服务器端）：

DEMO

代码：

function setCookie(name, value){
  // Set cookie to `namevalue;`
  // Won't overwrite existing values with different names
  document.cookie = name + value + ';';
}

function checkIfClicked(){
  // Split by `;`
  var cookie = document.cookie.split(";");

  // iterate over cookie array
  for(var i  = 0; i < cookie.length; i++){
    var c = cookie[i];
    // if it contains string "click"
    if(/click/.test(c))
       return true;
  }
  // cookie does not exist
  return false;
}

// Set clicked to either the existing cookie or false
var clicked = checkIfClicked();

// Check if it was clicked before
alert(clicked);

// Get the button
var button = document.getElementsByTagName("button")[0];

// If it had been clicked, diable button
if (clicked) button.disabled = true;

// Add event listener 
// When button clicked, set `click` cookie to true 
// and disable button
button.addEventListener("click", function(){
  setCookie("click", "true");
  button.disabled = true;
}, false);

【讨论】：

您不想在getCookie 函数中使用name 而不是硬编码/click/ 吗？看起来你根本没有在那个函数中使用name...

【解决方案2】：

<button id="clic">Click For Disable</button>

function setCookie(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = "; expires=" + date.toGMTString();
    }
    else var expires = "";
    document.cookie = name + "=" + value + expires + "; path=/";
}

function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}

$('#clic').click(function(){
    $(this).attr('disabled',true);
    setCookie('DisableBtn', true, null);
});
if(getCookie('DisableBtn'))
    $('#clic').attr('disabled',true);

【讨论】：