页面刷新后按钮应保持禁用状态

时间:2016-09-02 10:18:56

标签: javascript php jquery html css

我在提交按钮上应用了一段时间的残疾......一段时间后它被启用了......呃。 15秒后....如果我刷新页面然后按钮启用...按钮丢失了禁用时间并启用...请帮助我..

$(window).load(function(){
var enableSubmit = function(ele) {
    $(ele).removeAttr("disabled");
}

$("#submit").click(function() {
    var that = this;
    $(this).attr("disabled", true);
    setTimeout(function() { enableSubmit(that) }, 15000);
});
}); 


    var count = 1;
    function setColor(btn, color) {
        var property = document.getElementById(btn);
        if (count == 0) {
            property.style.backgroundColor = "#FFFFFF"
            count = 1;        
        }
        else {
            property.style.backgroundColor = "#7FFF00"
            count = 0;
        }
    }
<style type="text/css">
input[disabled] {
	background-color:#FF6347;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" id="submit" value="submit" class="btn" />

2 个答案:

答案 0 :(得分:2)

你可以做的是使用浏览器localstorage(HTML5功能)在其中存储按钮状态,并在页面加载时从localstorage获取该状态并使用JS将其分配给按钮。 要使用localstorage,您可以在此链接上获得帮助: http://www.w3schools.com/html/html5_webstorage.asp

在提交功能中:

$("#submit").click(function() {
    var that = this;
    $(this).attr("disabled", true);
    localStorage.setItem("button-state", 'true');
    setTimeout(function() {     $("#submit").attr('disabled',true);}, 15000);
});

在代码开头的Window onload中:

$(window).load(function(){
  var buttonState=Boolean(localStorage.getItem("lastname"));
   $("#submit").attr('disabled',buttonState);
});

答案 1 :(得分:1)

这是一个更详细的解决方法,它允许您准确计算所需的时间。我认为代码本身解释,否则只是问。此外,您可以根据自己的需要进行调整。 See jsfiddle

注意:你会在jsfiddle中找到cookie的方法。

$(function(){
    Program.Init();
});

var Program = {

    Init: function(){
        this.$target = $('#submit').attr("disabled", true);
        this.EnableSubmit();
        this.EventHandler();
    },

    EnableSubmit: function(){
        var value = this.Cookies.Get('submit_button');
        var now = Date.now();
        if( !value ) {
            this.$target.removeAttr("disabled");
            return;
        }
        setTimeout(function() { Program.EnableSubmit(); }, value - now);
    },

    Submit: function(){
        this.$target.attr("disabled", true);
        this.Cookies.Set('submit_button', Date.now() + 15000, 0.25, { expire_in: 'minutes' });
        setTimeout(function() { Program.EnableSubmit(); }, 15000);
    },

    EventHandler: function(){
        this.$target.on('click', function(){ Program.Submit(); });
    }

};