Question

我已经创建了一个按钮，但我希望按钮默认为disabled，启用按钮的方式是用户必须在复选框后单击复选框，按钮将显示3秒后的秒数按钮将能够点击。

这是我的按钮

的HTML

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

我已经制作了一个简单的界面，因此您可以轻松地知道我想要做什么。请检查图像以便轻松理解

方法一示例一：
https://imgur.com/a/y2YnN

方法二示例二（我提到方法二以备将来使用）：
https://imgur.com/a/jXdXe

所以我得到了方法一的代码（暂不用方法二）

但我的意思是当用户点击此处的复选框时显示我的按钮倒计时秒数是代码可以有人改进吗

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>

Answer 1

试试这个：

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>

Answer 2

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>

另一个允许显示秒数倒计时的片段

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>

Answer 3

您需要使用JavaScript setTimeout方法。这是jQuery中的实现。

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

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

您的HTML需要启用禁用标记

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

如何在按钮复选框

3 个答案: