Как сделать кнопку неактивной, пока не отмечен чекбокс с помощью JS ❎ WpCraft

Задача. Стояла задача сделать так, чтобы кнопка формы Contact Form 7 выглядела неактивной до тех пор пока не будут отмечены определенные чекбоксы (галочки) в форме (вроде «Согласие на обработку..»). Т.е. сама кнопка и так не срабатывает пока не отмечены обязательные чекбоксы, но нужно сделать, чтобы еще и визуально это было видно.

В принципе, по умолчанию Contact Form 7 делает такую функцию, но по какой-то причине это было переопределено.

Пример:
Обязазательное условие соглашение 1
Обязазательное условие соглашение 2

Решение. Используем JavasScript. Для кнопки нужно предусмотреть отдельный класс который будет давать ей серый цвет и прописать в стилях. Вешаем обработчик событий по клику на чекбоксы, с функцией, которая будет проверять у чекбоксов параметр checked на true / false, т.е. поставили галочку на чекбоксе или нет. Если оба чекбокса «true», то функция должна удалить у кнопки класс отвечающий за задание серого цвета.

HTML



<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>

<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



/* Обработчик события по клику на чекбоксы */
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");}
}

/* Обработчик события по клику на чекбоксы */

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");}

}