Чек-бокс отправки сообщений

[semyonl]

Привет. Как сделать чтобы неподтвержденный чек-бокс блокировал отправку формы?

[serega]

способов куча в любой секте :

✅ Способ 1: HTML‑валидация (самый простой)
Если ты используешь обычный <input type="checkbox">, просто добавь атрибут required.

Код: Выделить всё

<form>
  <label>
    <input type="checkbox" id="agree" required>
    Я согласен с условиями
  </label>

  <button type="submit">Отправить</button>
</form>

Браузер сам заблокирует отправку формы, пока чекбокс не отмечен.

✅ Способ 2: Блокировка кнопки через JavaScript
Если хочешь, чтобы кнопка была неактивной, пока чекбокс не отмечен:

Код: Выделить всё

<form id="myForm">
  <label>
    <input type="checkbox" id="agree">
    Я согласен с условиями
  </label>

  <button type="submit" id="submitBtn" disabled>Отправить</button>
</form>

Код: Выделить всё

<script>
  const checkbox = document.getElementById('agree');
  const button = document.getElementById('submitBtn');

  checkbox.addEventListener('change', () => {
    button.disabled = !checkbox.checked;
  });
</script>

✅ Способ 3: Проверка при отправке формы
Если нужно именно запретить отправку, а не блокировать кнопку:

Код: Выделить всё

<form id="myForm">
  <label>
    <input type="checkbox" id="agree">
    Я согласен с условиями
  </label>

  <button type="submit">Отправить</button>
</form>

Код: Выделить всё

<script>
  document.getElementById('myForm').addEventListener('submit', function(e) {
    if (!document.getElementById('agree').checked) {
      e.preventDefault();
      alert('Поставьте галочку, чтобы продолжить');
    }
  });
</script>

Отправлено спустя 2 минуты 53 секунды:
✅ Способ 4: самый жосткий : скрытие кнопки через dispaly: none

Код: Выделить всё

<form id="myForm">
  <label>
    <input type="checkbox" id="agree">
    Я согласен с условиями
  </label>

  <button type="submit" id="submitBtn" style="display: none;">
    Отправить
  </button>
</form>

<script>
  const checkbox = document.getElementById('agree');
  const button = document.getElementById('submitBtn');

  checkbox.addEventListener('change', () => {
    if (checkbox.checked) {
      button.style.display = 'block';   // показать кнопку
    } else {
      button.style.display = 'none';    // скрыть кнопку
    }
  });
</script>


Отправлено спустя 14 минут 57 секунд:
✅ Способ 5: Если подключишь Alpine , на 7 кб. Все кратко. Для этого и придуман

Код: Выделить всё

<div x-data="{ agree: false }">
    <label>
        <input type="checkbox" x-model="agree">
        Я согласен с условиями
    </label>

    <button
        type="submit" x-show="agree" x-transition x-cloak >
        Отправить
    </button>
</div>

Получается без JS .
x-cloak -- если все-таки кнопка успеет показаться, мигнет, то надо прописать сразу style="display: none;". Браузер быстрее, чем подключается Alpine .
x-transition уже чего-то анимирует и так, по минимуму.
Но можно расширить

Код: Выделить всё

        x-transition:enter.duration.300ms
        x-transition:leave.duration.300ms
        x-transition.opacity
        x-transition.scale.90