Делается это очень просто, блокируем кнопку отправки формы, а по клику на чекбокс ее разблокируем.
1 2 3 4 5 |
<div class="formname"> <input id="checkbox" type="checkbox" name="checkbox" onchange="document.getElementById('submit').disabled = !this.checked;" /> <label for="checkbox">Настоящим подтверждаю, что я согласен</label> <input type="submit" disabled="disabled" name="submit" id="submit" value="Отправить" /> </div> |
При необходимости, добавим немного стилей:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
.formname input[type=checkbox] { display:none; } .formname input[type=checkbox] + label { display: block; position: relative; margin: 12px 0 12px 30px; cursor: pointer; font-size: 16px; line-height: 20px; color: #333333; } .formname input[type=checkbox] + label:hover { color:#337AB7; } .formname input[type=checkbox] + label:before { position: absolute; content: ''; width: 22px; height: 22px; line-height: 22px; left: -30px; border: 1px solid #808080; } .formname input[type=checkbox]:checked + label:before{ content: '\2714'; color:#337AB7; font-size: 14px; text-align: center; font-weight: bold; border: 1px solid #337AB7; } .formname input[type=submit] { display: block; cursor: pointer; font-size: 14px; padding: 10px 30px; border: 1px solid #275F8B; background: #337AB7; color: #FFF; text-transform: uppercase; transition: .4s all; font-weight: bold; } .formname input[type=submit]:hover { background: #275F8B; } .formname input[disabled] { opacity: .6; cursor: not-allowed; } |
Добрый день! Подскажите пожалуйста, как в чекбоксе убрать галочку при обновлении страницы?
Нашел. Сам себе отвечу. Нужно например из строки <input type="checkbox" autocomplete="off" id="checkbox-at" name="checkbox-at" checked="checked"......> убрать checked="checked", а поставить autocomplete="off".
Здравствуйте. У меня, при установке формы, после нажатия на чекбокс весь текст заливается темно-синим цветом. Скрин прикладываю.
Посмотрел вроде все, не пойму почему. Подскажите.
скрин
Посмотрите в инструментах разработчика, что красит лейбл этот.
Выглядет примерно так, и справа смотрите, какие стили придают этот цвет.
Такой вопрос, если на сайте 2 и более форм, как сделать чтобы не конфликтовало? Просто если данный скрипт устанавливать на две формы, то не работает.
Заменить ID и их применение на любые другие, например:
Работает, спасибо!
Спасибо работает- но если не перезагрузить страницу после отправки то следующий отправляет без галочки
У вас лиса?
Если да, то она запоминает
Круто, спасибо. Надеюсь тема еще не заброшена и я смогу получить ответ. А как сделать так, чтобы наоборот. при нажатии галочки блокировалась кнопка? Хочу попробовать эту схему как защиту от спам регистрации ботами.
Только от спама это врядли поможет
О, спасибо. Думаю сделать вторым флажком активация которого будет отключать кнопку. Или спам боты так не перехитрить?
Я никогда не занимался спамом, но подозреваю что им пофик на эти галочки, тем более на JS
Вам нужно прятать файл отправщик, но это уже другая тема 🙂
Отличное решение! Очень выручили, почаще буду просматривать ваш сайт теперь =)
Гениально, работает на форме великолепно. Спасибо огромное! Только в тексте ссылку на Политику сделал.
А как сделать, чтобы по умолчанию галочка стояла активной ?
На input галочки добавить checked="checked"
а с input отправки убрать disabled="disabled"
Я вообще без всяких галочек делал.
Просто написал, что отправляя форму я согласен )