Javascript-форум - Включать флажки по очереди, как?

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Включать флажки по очереди, как? (https://javascript.ru/forum/events/81046-vklyuchat-flazhki-po-ocheredi-kak.html)

Включать флажки по очереди, как?

На хабре, когда постишь новый топик, нужно согласиться с правилами. Там идут флажки, нажимать надо каждый по очереди, причем есть таймаут (т.е. прочитал 5 секунд - нажал, следующий стал доступным).

Как заполнил все - можно постить. Вопрос - как такое сделать? Я вижу решение "в лоб", т.е. на каждый флажок сделать обработчик, написать свою функцию. Вида (псевдокот):

Код:

checkbox1.onclick {

wait 5 second.

checkbox2.enabled = true;

...

checkbox9.click

wait 5 second.

checkbox10.enabled = true;

...

Но как это сделать по уму, т.е. как то связной список может или еще что? Посоветуйте.

win32s,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  input[type="checkbox"] {
    width:19px;
    height:19px;
  }
  </style>


</head>

<body>
<input type="checkbox" name=""  disabled="disabled">
<input type="checkbox" name=""  disabled="disabled">
<input type="checkbox" name=""  disabled="disabled">
<input type="checkbox" name=""  disabled="disabled">
<input type="checkbox" name=""  disabled="disabled">
  <script>
async function mouseClick(el) {
    return new Promise(resolve => el.onclick = () => setTimeout(resolve, 5000));
}

(async function main() {
    for(const el of document.querySelectorAll('[type="checkbox"]')) {
        el.removeAttribute('disabled');
        await mouseClick(el);
    }
})();

  </script>
</body>
</html>

Большое спасибо, именно то, что надо!

Есть еще вопрос - как правильно выполнить действия после того, как пользователь отметил флажки? Скажем, вывожу ему форму ввода. Число три тут для примера (три флажка), сугубо для теста.

var cnt = 0;

async function mouseClick(el) 
{
    return new Promise(resolve => 
	el.onclick = () => {
		//console.log(el);
		  el.disabled = true;
		
		cnt++;
  		if (cnt < 3)
			 { setTimeout(resolve, 1000); }
		else
			{ console.log("fin"); }
		}
	);
}

(async function main() 
{
    for(const el of document.querySelectorAll('[type="checkbox"]')) 
	{
        el.removeAttribute('disabled');
        await mouseClick(el);
    }
	main().then(console.log("FIN"))	;
})();

Какой из вариантов правильный , где в main или в обработке клика ? Никогда раньше не работал ни с промисами, ни с async await, поэтому не совсем понимаю эти механизмы, где там конец кода.

win32s,

<!DOCTYPE html>
<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  input[type="checkbox"] {
    width:19px;
    height:19px;
  }
  .fin {
      transform: scale(0);
      margin: 0 auto;
      text-align: center;
      font-size: 3em;
  }
  .fin.open{
       transition: 1s;
       transform: scale(1);
  }

  </style>


</head>

<body>
<input type="checkbox" name=""  disabled="disabled">
<input type="checkbox" name=""  disabled="disabled">
<input type="checkbox" name=""  disabled="disabled">
<input type="checkbox" name=""  disabled="disabled">
<input type="checkbox" name=""  disabled="disabled">
<div class="fin">fin</div>
  <script>
async function mouseClick(el, delay) {
    return new Promise(resolve => el.onclick = () => {
    el.setAttribute('disabled', 'disabled');
    setTimeout(resolve, delay)
    });
}
const checkboxs = document.querySelectorAll('[type="checkbox"]'),
      fin = document.querySelector('.fin');
let  {length} = checkboxs;

(async function main() {
    for(const el of document.querySelectorAll('[type="checkbox"]')) {
        el.removeAttribute('disabled');
        let delay = --length ? 5000 : 0;
        await mouseClick(el, delay);
    }
    fin.classList.add('open');
})();

  </script>
</body>
</html>