时间戳

首页 > 解决方案 > 复选框未按我希望的那样工作

javascript - 复选框未按我希望的那样工作

问题描述

当我选中复选框时，文本字段中有一个运行 5 秒的计时器，在 5 秒文本字段启用输入后。此时一切都很好，但是当我在 5 秒内取消选中该复选框时，它仍然会启用。我希望当我取消选中该复选框时，它不应该启用。

下面是代码：

<html class='v2' dir='ltr' lang='en-us'>
<head lang="en">
<meta content='en_US' property='og:locale'/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>
</head>
<body>

<input type="text" id="custom" name="custom" class="input_custom" placeholder="Enable Text" disabled 
style="height: 50px;width: 400px;">

<input type="checkbox" name="onoffswitch" id="myonoffswitch" onclick="toggless()" 
style="height: 20px;width: 20px;">

<script>
function toggless() {
        if (document.getElementById('myonoffswitch').checked) {
            Timess();
}
else {
    document.getElementById('custom').value = ''
    document.getElementById('custom').placeholder = 'Enable Text'
    document.getElementById('custom').disabled = true
    }}
    
function Timess(){
  var timeleft = 5;
  var downloadTimer = setInterval(function function1(){
  document.getElementById("custom").placeholder = timeleft + 
  " "+"Seconds Remaining Enable Text";
  timeleft -= 1;
  if(timeleft <= 0){
      clearInterval(downloadTimer);
      document.getElementById('myonoffswitch').checked
      document.getElementById('custom').placeholder = 'Enter Your Text'
      document.getElementById('custom').disabled = false
      }}, 1000);
};
</script>
</body>
</html>

标签： javascripthtmlcsscheckbox

解决方案

除了@Waseem Almoliky 解决方案之外，我还看到了计数器显示的问题。它以第二次延迟开始，并在 2 秒后立即退出（不显示 1 秒），这也得到了处理。

function toggless() {
  if (document.getElementById('myonoffswitch').checked) {
    Timess();
  } else {
    clearInterval(downloadTimer);
     clearInterval(downloadTimer);
    document.getElementById('custom').value = ''
    document.getElementById('custom').placeholder = 'Enable Text'
    document.getElementById('custom').disabled = true
  }
}
var downloadTimer = null;

function Timess() {
  var timeleft = 5;
  updateCounter();
  downloadTimer = setInterval(function function1() {
    timeleft -= 1;
    updateCounter();
    if (timeleft <= 0) {
      clearInterval(downloadTimer);
      document.getElementById('myonoffswitch').checked
      document.getElementById('custom').placeholder = 'Enter Your Text'
      document.getElementById('custom').disabled = false
    }
  }, 1000);
  
  function updateCounter() {
        document.getElementById("custom").placeholder = timeleft +
      " " + "Seconds Remaining Enable Text";
  } 
};
<html class='v2' dir='ltr' lang='en-us'>

<head lang="en">
  <meta content='en_US' property='og:locale' />
  <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
</head>

<body>
  <input type="text" id="custom" name="custom" class="input_custom" placeholder="Enable Text" disabled style="height: 50px;width: 400px;">
  <input type="checkbox" name="onoffswitch" id="myonoffswitch" onclick="toggless()" style="height: 20px;width: 20px;">
</body>

</html>

推荐阅读