使用 setTimeout 禁用输入框

Question

我有一些输入框，如果单击它们，我想将其禁用几秒钟。

我正在使用

setTimeout

和

disabled

属性使复选框不可点击。然后我想用

clearTimeout

让它在片刻之后再次点击。

我遇到的两个问题：

1. 如果我单击一个框，它只会禁用第一个复选框。我假设这是因为它只禁用第一个带有

   id='test'

   的复选框但是如果我将它更改为

   getElementsByClassName

   disabled

   不起作用。

2. clearTimeout

   只是不工作。

这是一个jsfiddle。您可以注释掉 Javascript 部分中的第 6-8 行，以查看

disableClick()

函数如何与 ID 一起使用，但仅禁用数字过滤器。

这是我的 HTML：

<input id="test" type="checkbox" value="digital-filter" onclick="setTimeout(disableClick, 500)">
<span>Digital Filter</span>
<input id="test" type="checkbox" value="meter" onclick="setTimeout(disableClick, 500)">
<span>Meter</span>

这是我的javascript：

var subfilters;
function disableClick(){
    subfilters = document.getElementById("test").disabled = true;
}

setTimeout(() => {
  clearTimeout(subfilters);
}, 250);

Answer 1

你可以尝试更简单的东西，没有

clearTimeout

.

function disableInput(testIdx) {
  const test = document.querySelectorAll('[id=test]')[testIdx];
  test.disabled = true
  setTimeout(() => test.disabled = false, 500)
}

<label>
  <input id="test" type="checkbox" value="digital-filter" onclick="disableInput(0)">
  Digital Filter
</label>
<label>
  <input id="test" type="checkbox" value="meter" onclick="disableInput(1)">
  Meter
</label>

Answer 2

我不太确定你到底想做什么，但是我关闭了吗？

const options = document.querySelector('.options');
const lockableInputs = [].slice.call(options.querySelectorAll('.lockable-input'));

options.addEventListener('change', e => {
  const { target } = e;
  
  if (!target.closest('.lockable-input')) return;
  
  e.preventDefault();
  
  if (!target.checked) return;
  
  lockableInputs.forEach(input => input.disabled = true);

  setTimeout(() => {
    lockableInputs.forEach(input => input.disabled = false);
  }, 2000);
});