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

Маразм крепчал. Но... поехали...

Итак, на большинстве блогов, как минимум три области где, в соответствии с известными требованиями, пользователь, прежде чем отправить какие-либо персональные данные, должен явно подтвердить на это своё согласие. Типа он изучил и принимает политику конфиденциальности сайта и некие пользовательские соглашения. При нашем-то менталитете кто-нибудь читает всю эту галиматью? Чай, не дикий запад... Но ладно, идём дальше...

Общий принцип

Как правило, я уже про области,  это форма обратной связи, форма подписки на рассылку, ну и форма комментариев... Впрочем, таких областей может быть сколько угодно - подход везде один.

В общем виде код выглядит так:

<form>
<input type='checkbox' onchange="document.getElementById('submit').disabled = !this.checked" checked />
<input type='button' id='submit' disabled value="Отправить форму" />
</form>

Как видим - всё просто до безобразия. Перед кодом кнопки мы помещаем код чекбокса, который уже отмечен по умолчанию. А при изменении состояния чекбокса меняется и доступность кнопки.

Обратите внимание, что всё дело тут в ID кнопки. В данном примере чекбокс проверяет элемент страницы с ID = «submit» и делает его активным или неактивным в зависимости от своего состояния.

Если реальный ID элемента иной, то его и нужно прописать в коде чекбокса.

Реальные примеры

Форма подписки на рассылку

Код формы подписки, предоставляемый сервисами, без пол-литра разобрать весьма проблематично. Вот, например, код от моего SendPulse:

<div id="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00" style="width: 300px !important;background-color: #ffffff !important;border-style: solid !important;border-width: 1px !important;border-color: #132159 !important;border-radius: 5px !important;"><style>.9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line p,.9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line h1,.9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line h2,.9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line h3,.9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line h4,.9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line h5,.9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line h6{margin:0!important;color:inherit!important;font:inherit!important;}</style><input type="hidden" name="sform[hash]" value="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00"><div class="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line"><div style="padding: 30px !important;padding-top: 5px !important;padding-bottom: 5px !important;background-color: #ffffff !important;border-radius: 4px 4px 0px 0px !important;"><div style="display: inline-block !important;vertical-align: top !important;word-wrap: break-word !important;text-align: center !important;color: #566ad6 !important;width: 100% !important;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif !important;font-size: 24px !important;font-weight: bold !important;" elemtype="sform-text"><h3><strong>Новости блога</strong></h3></div></div></div><div class="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line"><div style="padding: 5px !important;padding-top: 5px !important;padding-bottom: 5px !important;"><div style="display: inline-block !important;vertical-align: top !important;word-wrap: break-word !important;text-align: center !important;color: #2b37de !important;width: 100% !important;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif !important;font-size: 14px !important;font-weight: normal !important;" elemtype="sform-text"><p>1-2 раза в месяц Вы будете получать анонсы новых статей этого блога.</p></div></div></div><div class="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line"><div style="padding: 5px !important;"><div style="display: inline-block;"><div elemtype="sform-label" style="margin-bottom: 5px;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; !important;font-size: 12px !important;font-weight: bold !important;color: #142900 !important;text-align: left !important;">Ваше имя:</div><div elemtype="sform-input" style=""><input class="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_text" style="padding: 5px !important;border-width: 1px !important;border-style: solid !important;border-color: #eeeeee !important;width: 280px !important;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; !important;font-size: 12px !important;font-weight: normal !important;color: #666 !important;background: #fff url('//obg.kz/wp-content/uploads/2015/07/name.png') no-repeat center right;" maxlength="255" name="sform[0LjQvNGP]" required="required"></div></div></div></div><div class="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line"><div style="padding: 5px !important;"><div style="display: inline-block;"><div elemtype="sform-label" style="margin-bottom: 5px;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; !important;font-size: 12px !important;font-weight: bold !important;color: #142900 !important;text-align: left !important;">Ваш email:</div><div elemtype="sform-input" style=""><input class="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_email" style="padding: 5px !important;border-width: 1px !important;border-style: solid !important;border-color: #eeeeee !important;width: 280px !important;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif; !important;font-size: 12px !important;font-weight: normal !important;color: #666 !important;background: #fff url('//obg.kz/wp-content/uploads/2015/07/email.png') no-repeat center right;" maxlength="255" name="sform[email]" type="email" required="required"></div></div></div></div><div class="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line"><div style="text-align: center !important;padding: 5px !important;padding-top: 5px !important;padding-bottom: 5px !important;"><div style="display: inline-block;" elemtype="sform-button"><button id="button9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00" style="text-decoration: none; border-style: solid; text-align: center; border-collapse:inherit;background: linear-gradient(#9fd6fa, #6bb9f7) repeat scroll 0 0 rgba(0, 0, 0, 0);border-color: #72bdf4 #72bdf4 #4a9de1;border-image: none;border-style: solid;border-width: 1px 1px 3px;box-shadow: 0 0 0 1px #bfe4fc inset;color: #fff;text-shadow: 0 1px 0 #4598f3;color: #FFFFFF !important;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif !important;font-size: 22px !important;font-weight: normal !important;background-color: #B2B2B2 !important;border-radius: 5px !important;width: 250px !important;height: 40px !important;cursor: pointer;border-width: 1px;border-style: solid;padding: 5px;" onclick="sform9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00._button(this);">Подписаться</button></div></div></div><div class="9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00_form_line"><div style="padding: 5px !important;padding-top: 5px !important;padding-bottom: 5px !important;"><div style="display: inline-block !important;vertical-align: top !important;word-wrap: break-word !important;text-align: center !important;color: #69696b !important;width: 100% !important;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif !important;font-size: 14px !important;font-weight: normal !important;" elemtype="sform-text"><p><img src="https://login.sendpulse.com/img/lock.png" alt="email рассылки" /> Конфиденциальность гарантирована</p></div></div></div><div id="_plain_message9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00" style="display:none;"></div><div><div style="display: inline-block !important;text-align: center !important;width: 100% !important;font-size: 12px !important;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif !important;color='#2A6496' !important;padding: 10px !important;font-weight:normal !important;border-radius: 0px 0px 4px 4px  !important;" elemtype="sform-text"><a href="https://sendpulse.com/?rg=4&uid=252153"><img src="https://cdn.sendpulse.com/img/logoimage.png" alt="email рассылки" style="width:100px"></a></div></div></div><script type="text/javascript" src="https://fast.sendpulse.com/members/forms/user-form-js/ac/9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00/c/1/"></script><script type="text/javascript">var sform_lang = 'ru'</script>

Всё просто и понятно, не так ли?  Но нам и не нужно разбираться в этом коде, тем более менять его.  Нам нужно найти в нём только код кнопки. Он может начинаться с тега <button> либо с <input type="button"...

У меня он выглядит так:

<button id="button9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00" style="text-decoration: none; border-style: solid; text-align: center; border-collapse:inherit;background: linear-gradient(#9fd6fa, #6bb9f7) repeat scroll 0 0 rgba(0, 0, 0, 0);border-color: #72bdf4 #72bdf4 #4a9de1;border-image: none;border-style: solid;border-width: 1px 1px 3px;box-shadow: 0 0 0 1px #bfe4fc inset;color: #fff;text-shadow: 0 1px 0 #4598f3;color: #FFFFFF !important;font-family: Arial,'Helvetica Neue',Helvetica,sans-serif !important;font-size: 22px !important;font-weight: normal !important;background-color: #B2B2B2 !important;border-radius: 5px !important;width: 250px !important;height: 40px !important;cursor: pointer;border-width: 1px;border-style: solid;padding: 5px;" onclick="sform9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00._button(this);">Подписаться</button>

Вот такой вот код кнопки... Обратите внимание на ID этой кнопки!

Вставляем перед кнопкой наш универсальный чекбокс из первого примера, в котором меняем ID на тот, который присвоен кнопке. Реально у меня вот такая вставка:

<input type='checkbox' onchange="document.getElementById('button9204bae9fc24abe7038f827e3035300efd6e3ace516d827f81a8709d4a42eb00').disabled = !this.checked" checked/> Я согласен с <a href="https://obg.kz/politika-konfidentsialnosti" target = "_blank">политикой конфиденциальности сайта</a>

Как видите, после чекбокса я прописал ещё текст со ссылками на политику конфиденциальности.

Будьте осторожны! Из кода формы удалять что-либо не рекомендуется. Форма может не работать. Допустима только вот такая вставка!

Но по сути страшного ничего и нет. Найти код кнопки можно и вставить чекбокс тоже. Сложностей не должно возникнуть. 

Форма обратной связи 

Здесь проще. В том смысле, что код тут более читабельный и легче найти нужную кнопку.

Опять-таки покажу на своём примере:

<p><input type='checkbox' onchange="document.getElementById('submitFF').disabled = !this.checked" checked/> Я согласен с <a href="https://obg.kz/politika-konfidentsialnosti" target = "_blank">политикой конфиденциальности сайта</a></p>
<p><input id="submitFF" type="submit" value="Отправить" /></p>

Как видите всё тоже самое, только уже с привязкой к новому ID... Да, и здесь, в отличие от регистрации на подписку кнопка реализована не тегом «button», а тегом «input», что ровным счётом ничего не меняет.

Надеюсь, что принцип понятен и сложностей у вас никаких не возникнет.

А я, кстати, заметил что в моей форме обратной связи слетели все стили. Скорее всего это плагин Autooptimise постарался. А может и нет. Потом разберусь, фигня всё это. Сейчас немного не до стилей мне...

Форма комментариев

Те, кто использует мой плагин визуального редактора комментариев могут уже не беспокоиться по поводу чекбокса. Такой функционал в плагине реализован. А остальные - по принципу приведённых в статье примеров, вставляйте код.

Ну вот и всё. Надеюсь статья оказалась для вас полезной.

Удачи вам.

Материалы по теме:

Буквица в статьях WordPress без плагина

Как закрыть внешние ссылки правильно

Форма обратной связи

WordPress изображения. Как избавиться от лишних…

Плагины WordPress 2014 – ревизия

Виртуальные путешествия при помощи Яндекс карт