CODEWITHSUNDEEP
javascriptjqueryhtmlcssweb
Sumair Ali
Sumair Ali

Reputation: 17

How to Make A button Clickable after some seconds when user click checkbox

I have make a button but I want the button to be disabled by default and the way to enable the button is the user must click on the checkbox after check box the button will show seconds counting after 3 seconds button will be able to gets click.

Here is my HTML for my button 

<button type="submit" class="MY_CLASS" id="MY_ID">Claim Your Coin</button>

I have make a simple interface so you will easily know what I want to do. Please check images to understand very easily

Method one EXAMPLE one:
https://i.sstatic.net/gY9F8.jpg

Method two EXAMPLE two (I am mentioning the method two for future use):
https://i.sstatic.net/Sguq2.jpg

So i got the code for method one (dont get for method two still)

But i was meant to show countdown of seconds going down on my button when the user click on the check box here is the code Can someone improve it 

function toggle(){
setTimeout(function(){
var btn = document.getElementById("claim");
var chk = document.getElementById("chk");
debugger;
btn.disabled = !chk.checked;
},3000);
}
</script>
<label><input id = "chk" onchange= "toggle();" type="checkbox" 
name="checkbox" value="value">Click on the check box to enable 
button</label>
<button type="button" class="btn btn-secondary" data-
dismiss="modal">Close</button>
<button disabled type="submit" class="btn btn-primary" id="claim">Claim Your 
Coin</button>

Upvotes: 0

Views: 1380

Answers (3)

orabis
orabis

Reputation: 2809

function toggle(){
setTimeout(function(){
var btn = document.getElementById("MY_ID");
var chk = document.getElementById("chk");

btn.disabled = !chk.checked;
},3000);
}
<label><input id = "chk" onchange= "toggle();" type="checkbox" name="checkbox" value="value">Click on the check box to enable button</label>
<button disabled type="submit" class="MY_CLASS" id="MY_ID">Claim Your 
Coin</button>

One more snippet to allow showing the count down of seconds

function toggle(){

var feedback = document.getElementById("feedback");
var time= new Date().getTime();
var interval= setInterval(function(){
  var newTime= new Date().getTime();
  var diff = newTime - time;
  feedback.innerHTML = "Time remained to change enablement:"+ (3000 - diff);
}, 0);
setTimeout(function(){
var btn = document.getElementById("MY_ID");
var chk = document.getElementById("chk");

btn.disabled = !chk.checked;
clearInterval(interval);
feedback.innerHTML = "";
},3000);
}
<label><input id = "chk" onchange= "toggle();" type="checkbox" name="checkbox" value="value">Click on the check box to enable button</label>
<button disabled type="submit" class="MY_CLASS" id="MY_ID">Claim Your 
Coin</button>
<div id="feedback"></div>

Upvotes: 1

Mr. Rit Makston
Mr. Rit Makston

Reputation: 126

Try this:

var cb = document.getElementById ("cb");
var button = document.getElementById ("MY_ID");

cb.onclick = function (e) {
  setTimeout (function () {
    button.disabled = "";
  }, 3000);
}
<input id="cb" type="checkbox" />
<button type="submit" class="MY_CLASS" id="MY_ID" disabled>Claim Your Coin</button>

Upvotes: 0

Nicholas Porter
Nicholas Porter

Reputation: 2951

You will need to use JavaScript setTimeout method. Here is the implementation in jQuery.

JSBIN: http://jsbin.com/jogegikebo/1/edit?html,js,console,output

$('document').ready(function(){
    setTimeout(function(){
        $('.MY_CLASS').attr('disabled',false);  
    },3000)
})

Your HTML will need to have the disabled flag to start

<button type="submit" class="MY_CLASS" id="MY_ID" disabled="true">Claim Your Coin</button>

Upvotes: 0

Related Questions