Проблема: Стояла задача сделать так, чтобы кнопка формы Contact Form 7 выглядела неактивной до тех пор пока не будут отмечены определенные чекбоксы (галочки) в форме (вроде «Согласие на обработку..»). Т.е. сама кнопка и так не срабатывает пока не отмечены обязательные чекбоксы, но нужно сделать, чтобы еще и визуально это было видно. Например, пока не отмечены условия – кнопка серая, когда отметили – зеленая.
Пример:
Обязазательное условие соглашение 2
Решение: Используем JavasScript. Для кнопки нужно предусмотреть отдельный класс который будет давать ей серый цвет и прописать в стилях. Вешаем обработчик событий по клику на чекбоксы, с функцией, которая будет проверять у чекбоксов параметр checked на true / false, т.е. поставили галочку на чекбоксе или нет. Если оба чекбокса «true», то функция должна удалить у кнопки класс отвечающий за задание серого цвета.
HTML
|
1
2
3
4
5
6
7
8
9
|
class="example-block">
type="checkbox" id="check-1">Обязательное условие соглашение 1
type="checkbox" id="check-2">Обязательное условие соглашение 2
|
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");}
}
|
