Как проверить, что ни один чекбокс не чекнут на странице?

Question

[Mirrrta]

У меня есть чекбоксы в форме, такая структура:

<form>
  <label>
    <input type=checkbox value='1' />
  </label>
  <label>
    <input type=checkbox value='2' />
  </label>
  <button type='submit'>
</form>

При сабмите проверяю данные через new FormData(e.currentTarget).
Как сделать так, чтобы кнопка сабмита была неактивной, если ни один чекбокс не чекнут, не сабмитя форму?

Answer 1

[0xD34F]

const [ items, setItems ] = useState([
  { value: ..., text: '...', checked: false },
  { value: ..., text: '...', checked: false },
  ...
]);

const onChange = ({ target: { checked, dataset: { index } } }) => {
  setItems(items.map((n, i) => i === +index ? { ...n, checked } : n));
};

<form>
  {items.map((n, i) => (
    <div>
      <label>
        <input
          type="checkbox"
          data-index={i}
          value={n.value}
          checked={n.checked}
          onChange={onChange}
        />
        {n.text}
      </label>
    </div>
  ))}
  <button disabled={items.every(n => !n.checked)}>submit</button>
</form>

https://jsfiddle.net/ps6zt52a/

Answer 2

[MifeeX]

попробуйте использовать Redux-form.
Ну и кнопку ставьте в false, а на чекбоксы вешайте обработчик событий. Если чекбокс чекнут, кнопка становится нормальной, в противном случае наоборот