2016-09-02 2 views
1

Я применил инвалидность в течение некоторого времени на кнопке отправки .... через некоторое время его активируется. после 15 секунд .... Ь, если я обновить страницу, то кнопка получает включена ... кнопка потеряла DIABLE времени и позволить становится ... пожалуйста, помогите мне ..Кнопка должна оставаться отключенной после обновления страницы.

$(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] { 
 
\t 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" />

+0

Код не работает, просьба указать jQuery. –

+0

Вы обновляете страницу, что делает ее новым началом, ваши отключения и таймеры не выдерживают перезагрузки страницы. –

+0

Для этого вам нужно написать код на стороне сервера. Сохраните значение в файле cookie. Проверяйте значение cookie каждый раз, когда вы перезагружаете страницу и отключите ее. – Ish

ответ

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); 
}); 

А внутри окна OnLoad в начале кода:

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

(не забудьте очистить «состояние кнопки» в тайм-ауте и повторно запустить таймаут при загрузке) –

1

Вот немного более развернутый обходной путь, который позволяет точно рассчитать необходимое время. Я думаю, что код объясняет сам, иначе просто спросите. Кроме того, вы можете адаптировать его к вашим потребностям. See jsfiddle.

Примечание: вы найдете методы для файлов cookie в jsfiddle.

$(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(); }); 
    } 

}; 
Смежные вопросы