Чекбокс согласия на обработку персональных данных (скрипт, стилизация)

[Pascha]

Теперь всегда нужно чтоб на вашем сайте в любой форме обратной связи присутствовал чекбокс  согласия на обработку персональных данных.
Зачастую разработчики уже предусматривают данную приблуду в своих дополнениях... но что если нет? Что если для Вас проблематично поменять код самого модуля по каким то причинам? 
Самое простое- вставить несложный скрипт и сделать пару правок.
Вот этим мы и займемся. 
Итак... мы открыли код вывода формы обратной связи и ориентируясь на кнопку кода отправки сообщения:
как правило это кнопка (ссылка или button )

type="submit" 

*можно использовать для поиска по документу.

Где то чуть выше вставляем

<div class="form-chek">
<input type="checkbox" id="politics" onclick="check();" value="" autocomplete="off"/>
Я согласен (-на) на обработку персональных данных
</div>

тем самым мы сделали то что требуется....

но... 
отправка сообщения возможна что при активном чекбоксе, что при неактивном.... 
"факир был пьян- и фокус не удался" ))))

Потому мы еще не закончили и поработаем с самой кнопкой отправки сообщения из формы

к примеру мы имеем 

<button type="submit" class="btn btn-lg btn-primary">Оставить заявку</button>

чуть видоизменим ее на 

<button type="submit" name="submit" class="submit btn btn-lg btn-primary" disabled="">Оставить заявку</button>

и вставим скрипт

<script>
function check() {
var submit = document.getElementsByName('submit')[0];
if (document.getElementById('politics').checked)
submit.disabled = '';
else
submit.disabled = 'disabled';
}
</script>	

тем самым... пока чекбокс не активен - кнопка отправки сообщений так же не кликабельна...

 

и при активном/отмеченном чекбоксе кнопка отправки становится работоспособной...

 

казалось бы мы уже можем остановиться на этом)))
но....
есть и другие задачи: 
к примеру такие, как стилизовать собственно чекбокс под дизайн сайта ( по умолчанию активный чекбокс - синего цвета ( так его определяют браузеры и подтягивают стандартные стили)
исправим это недоразумение одной строчкой 

#politics {
    accent-color: #FFCB4A;
}

и вот она уже стала того цвета что нам требовалось.

 

[Алексей Костюк]

Добрый день. А если на одной странице есть 2 формы, то на одной перестает работать скрипт

[Pascha]

4 часа назад, Алексей Костюк сказал:

Добрый день. А если на одной странице есть 2 формы, то на одной перестает работать скрипт

обратите внимание на "обертку" 
 

if (document.getElementById('politics').checked)

то есть  блок к примеру в

<input type="checkbox" id="politics" onclick="check();" value="" autocomplete="off"/>

а второй блок к примеру в

<input type="checkbox" id="politicform" onclick="check();" value="" autocomplete="off"/>

и вот Вам новая идея прописать скрипт для politicform

<script> 
  function check() { var submit = document.getElementsByName('submit')[0]; 
     if (document.getElementById('politicform').checked) 
        submit.disabled = ''; 
         else 
        submit.disabled = 'disabled'; } 
</script>

либо еще проще
 

<script> 
function check() {
var submit = document.getElementsByName('submit')[0];
var notChecked = false;
if (!document.getElementById('politics').checked) notChecked = true;
if (!document.getElementById('politicform').checked) notChecked = true;
if(!notChecked) submit.disabled = '';
else
submit.disabled = 'disabled';
}
</script>