Делается это очень просто, блокируем кнопку отправки формы, а по клику на чекбокс ее разблокируем.
|
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".
Здравствуйте. У меня, при установке формы, после нажатия на чекбокс весь текст заливается темно-синим цветом. Скрин прикладываю.
Посмотрел вроде все, не пойму почему. Подскажите.
[img]https://skr.sh/s9n45DJaN9j[/img]
[url="https://ibb.co/7tMty2C"]скрин[/url]
Посмотрите в инструментах разработчика, что красит лейбл этот.
Выглядет примерно так, и справа смотрите, какие стили придают этот цвет.
[img]https://atuin.ru/upload/1630333808_0.png[/img]
Такой вопрос, если на сайте 2 и более форм, как сделать чтобы не конфликтовало? Просто если данный скрипт устанавливать на две формы, то не работает.
Заменить ID и их применение на любые другие, например:
[code]<input id="newcheckbox" type="checkbox" name="checkbox" onchange="document.getElementById('newsubmit').disabled = !this.checked;" />
<label for="newcheckbox">Настоящим подтверждаю, что я согласен</label>
<input type="submit" disabled="disabled" name="submit" id="newsubmit" value="Отправить" />[/code]
Работает, спасибо!
Спасибо работает- но если не перезагрузить страницу после отправки то следующий отправляет без галочки
У вас лиса?
Если да, то она запоминает
Круто, спасибо. Надеюсь тема еще не заброшена и я смогу получить ответ. А как сделать так, чтобы наоборот. при нажатии галочки блокировалась кнопка? Хочу попробовать эту схему как защиту от спам регистрации ботами.
[code]<div class="formname">
<input id="checkbox" type="checkbox" name="checkbox" onchange="document.getElementById('submit').disabled = this.checked;" />
<label for="checkbox">Настоящим подтверждаю, что я согласен</label>
<input type="submit" name="submit" id="submit" value="Отправить" />
</div>[/code]
Только от спама это врядли поможет
О, спасибо. Думаю сделать вторым флажком активация которого будет отключать кнопку. Или спам боты так не перехитрить?
Я никогда не занимался спамом, но подозреваю что им пофик на эти галочки, тем более на JS
Вам нужно прятать файл отправщик, но это уже другая тема 🙂
Отличное решение! Очень выручили, почаще буду просматривать ваш сайт теперь =)
Гениально, работает на форме великолепно. Спасибо огромное! Только в тексте ссылку на Политику сделал.
А как сделать, чтобы по умолчанию галочка стояла активной ?
На input галочки добавить checked="checked"
а с input отправки убрать disabled="disabled"
Я вообще без всяких галочек делал.
Просто написал, что отправляя форму я согласен )