Задача. На одном проекте использовалась форма Contact Form 7 и по какой-то причине, там не срабатывало своство блокировки кнопки отправки формы при неотмеченном чекбоксе согласия с правилами обработки данных.
Пример:
Обязазательное условие соглашение 1
Обязазательное условие соглашение 2
Обязазательное условие соглашение 1
Обязазательное условие соглашение 2
Решение. Используем JavasScript. Для кнопки нужно предусмотреть отдельный класс который будет давать ей серый цвет и прописать в стилях. Вешаем обработчик событий по клику на чекбоксы, с функцией, которая будет проверять у чекбоксов параметр checked на true / false, т.е. поставили галочку на чекбоксе или нет. Если оба чекбокса «true», то функция должна удалить у кнопки класс отвечающий за задание серого цвета.
HTML
|
1 2 3 4 5 6 7 8 9 |
<div class="example-block"> <input type="checkbox" id="check-1">Обязательное условие соглашение 1<br> <input type="checkbox" id="check-2">Обязательное условие соглашение 2<br> <button class="grey-button" class="green-button" id="submit-button">Отправить</button> </div> |
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Обработчик события по клику на чекбоксы */ document.getElementById('check-1').addEventListener("click", displaySubmit); document.getElementById('check-2').addEventListener("click", displaySubmit); /* Получаем чекбоксы, кнопку и добавляем последней класс, который будет давать серый цвет */ let check_1 = document.getElementById('check-1'); let check_2 = document.getElementById('check-2'); let submit_button = document.getElementById('submit-button'); submit_button.classList.add("grey-button"); /* Функция проверяет если в обоих чекбоксах checked = true, то удаляет у кнопки класс который дает серый цвет */ function displaySubmit(){ if (check_1.checked && check_2.checked){ submit_button.classList.remove("grey-button"); } else {submit_button.classList.add("grey-button");} } |