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

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

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

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

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

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

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

<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 постарался. А может и нет. Потом разберусь, фигня всё это. Сейчас немного не до стилей мне...

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

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

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

Удачи вам.

Огни большого города https://obg.kz

Смотрите также

Смайлы в статьи WordPress

Свои смайлы в статьи WordPress

Содержание:1 Что не устраивает в стандартных способах2 Свои смайлы в статьи WordPress2.1 Файл index.php2.2 Файл …

Резервное копирование WordPress

Резервное копирование WordPress

Содержание:1 Резервное копирование WordPress - плагин BackWPup2 Резервное копирование WordPress - плагин XCloner2.1 Плагин XCloner2.2 …

32 комментария

  1. Спасибо, Саша! Быстро ты управился, обещал через пару дней, а уже сделал!

    Спасибо, большое! Это сейчас очень актуально! Я не знала, как правильно связать чек бокс с кнопкой! А оказывается, всё очень даже просто 

    Спасибо, огромное no за твоё здоровье!

    • Да не за что, Ирина. Просто я понял, что для многих это больной вопрос, вот и написал. Правда, торопился, хотелось побыстрее, поэтому может что-то коряво или непонятно вышло. Но вроде бы принцип должен быть ясен из статьи. дальше уже дело техники и фантазии…

      • Что ты, Саша, всё написано предельно понятно, разжёвано и в рот положено.

        А вот ты в комментах пишешь, что давал код формы обратной связи, а поточнее, где его найти?

        А то плагин слишком тяжёлый и чек бокс вставлять не удобно)))

         

  2. Александр, возник вопрос. Если кнопка с формой обратной связи – часть плагина Вордпресс, получается, остается искать "button" по коду всех его файлов, править и больше не обновлять? Сейчас осваиваю Elementor для лендингов, там чекбоксов нет, увы. Думал уже, как добавить. Теперь есть надежда, что удастся сделать это с минимальными затратами времени. Попробую, отпишусь.

    • …получается, остается искать "button" по коду всех его файлов, править и больше не обновлять?

      Обновлять надо обязательно. Всегда… Как лучше поступить в твоём случае даже не знаю. Может сохранить себе строку с чекбоксом и после каждого обновления этого конкретного плагина вставлять заново?

      С другой стороны, я не понимаю – ради одной формы обратной связи держать плагин? На мой взгляд, можно обойтись без плагина. Я показывал код формы, он у меня и сейчас стоит – там всё, что нужно, в том числе и прикрепление файлов к сообщению… Может тебе проще в эту сторону глянуть? 

      • За совет спасибо. Попробую и этот вариант. Я ж наверняка статью эту читал, но сейчас отдыхаю мало + память подводит ) SpeedDial у меня уже в полном хаосе, надо что-то новое подыскивать для хранения закладок.

        • У меня в SpeedDial 17 вкладок, на каждой в среднем 30 дилов… cheeky Это несмотря на то, что в последнее время усиленно удаляю дилы, которые мне якобы уже не нужны… Как по твоим меркам, это хаос? cool

          • Если есть структура, однозначно не хаос. У меня тоже поначалу все упорядочивалось, потом в спешке стал набрасывать закладки в общую кучу, и пошло-поехало.

            Посмотрел твою всплывающую контактную форму, вспомнил ее, но это не то, для лендинга не подходит. Придется лезть в код к плагину… ну да ладно.

        • Ты вот эту форму смотрел?  Она не всплывающая. Вот она у меня в действии

          Я её вставил ещё проще, чем описывал в статье… cheeky

  3. Александр, в Казахстане тоже есть этот дурацкий закон о политике конфиденциальности?

  4. …для многих это больной вопрос…

    Саш, не твоя бы эта статья, я и не подозревал бы ни о какой активации или деактивации кнопки. Кстати, в твоём плагине (форме комментов) чекбокса не наблюдаю. В форме контактов у себя на сайтах, так же чекбокс отсутствует. Считаю, что он в моей форме контактов и не нужен. Может я ошибаюсь?

    …он у меня и сейчас стоит…

    Рад за твоё здоровье!

     

    • Миша, привет!

      Кстати, в твоём плагине (форме комментов) чекбокса не наблюдаю.

      Ты хочешь сказать, что у тебя версия плагина 2.08 и в настройках ты не увидел, как прописать чекбокс? Или ты думаешь, что он сам по себе нарисуется со всеми ссылками на твои документы по конфиденциальности?

      Я даже рассылку делал про это обновление плагина. Вот это ты читал?

      Считаю, что он в моей форме контактов и не нужен. Может я ошибаюсь?

      Миш, ты сам решаешь нужно тебе это или не нужно. В Казахстане таких требований пока вообще нет. Сделал для россиян, а там решайте сами – надо или нет… 

  5. Вот это ты читал?

    Привет, Саша! Судя по моим комментариям под той статьёй на который ты даёшь ссылку – читал. Как тебе известно, я почти 2 месяца был "в ремонте". После ремонта обновил все плагины, их было 11. Сегодня, после твоего ответа на комментарий, заглянул в админку, посмотреть, какая же версия у меня на данный момент установлена. Версия была 2.04 и "приглашение к обновлению". А вчера я устанавливал пару плагинов для тестирования – все плагины были обновлены. Получается, что обновление твоего плагина мне пришло только сегодня. Саш, я помню, в статье читал что-то о ваших с Гудвином экспериментах по установке, но вот, хоть лопни, не помню тему о чекбоксе конфиденциальности.

    Сделал для россиян, а там решайте сами — надо или нет…

    Прости, что заставил тебя раздражаться. blush

    • Миш, я обновлял эту статью несколько дней назад, сразу после обновления плагина. Там добавил как раз раздел про этот чекбокс. А в то время, когда ты оставлял там комменты, ничего этого не было ещё…

      А история с Гудвином вообще древняя уже. Обновление плагина я выкладывал в репозиторий три дня назад!

      Прости, что заставил тебя раздражаться

      Не понял, при чём тут раздражение. В Казахстане таких законов нет, поэтому я действительно делал в основном для россиян. А уж применять или нет каждый решает сам. Не ищи подтекста, как говорится: "Иногда кофе – это просто кофе"…  

  6. С кодами я не дружу, поэтому ничего и менять не буду. Меня вроде бы все устраивает.

  7. Хм, просто и понятно. Спасибо.

  8. Я далека от этого, приходится обращаться к специалистам.

  9. Александр, честно говоря, тема статьи «Как сделать кнопку неактивной пока не отмечен чекбокс» менее понятна, нежели сам ответ …

    К счастью всю эту кухню делегировал верстальщику и вижу, что правильно сделал – ну жалко мне отрываться от земли в такое кодовое поднебесье …

    Однако вижу многим это по плечу – рад за всех …

    • Насчёт темы… Я долго перебирал возможные варианты, этот показался мне наиболее понятным… Но не уверен, что он так же понятен для всех… А как ещё можно было назвать статью?

  10. Привет! Как всегда наговорил много, а дел на три копейки. Конечно для тех кто код умеет читать  А смайлы так и не растянул. Зато конфидециальность сайта теперь подтверждена.

    Шутка конечно.

    • Много наговорил – хотелось объяснить для всех… Но ты прав, дольше писал, чем делал… cheeky Зато может кому и пригодится…

      Про растягивание смайлов… Думаю не критично, да и не охота сейчас туда лезть… 

  11. В форме подписки надо заменить "согласен" на "соглашаюсь" – чтобы универсальное слово было для мужчин и женщин

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Я принимаю политику конфиденциальности сайта и пользовательское соглашение