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

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

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

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

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

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

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

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

Всё просто и понятно, не так ли? k0505 - Как сделать кнопку неактивной, пока не отмечен чекбокс Но нам и не нужно разбираться в этом коде, тем более менять его.  Нам нужно найти в нём только код кнопки. Он может начинаться с тега <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 изображения. Как избавиться от лишних…

Изображения WordPress, пожалуй, самая неудачная часть реализации этого, в общем-то, неплохого движка. Я уже писал …

Видео с YouTube без чёрных рамок

Видео с YouTube без чёрных рамок

Видео без чёрных рамок? Легко! YouTube настолько прочно вошёл в нашу жизнь, что сложно представить …

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. В форме подписки надо заменить "согласен" на "соглашаюсь" – чтобы универсальное слово было для мужчин и женщин

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

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

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