Как сделать кнопку неактивной html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Snip Code

Делаем кнопку отправки формы неактивной

Задача: сделать кнопку отправки формы неактивной, до тех пор, пока пользователь не поставит “галочку” в checkbox. Применяется, например в формах, где перед отправкой формы пользователь должен принять некие условия, соглашения и т.д.

Решение

onchange=”document.getElementById(‘submit’).disabled = !this.checked” – делает неактивной кнопку отправки формы, пока пользователь не отметит checkbox.

Работает это вот так вот:

Рейтинг:

Если вы знаете более оригинальное, красивое, ЛУЧШЕЕ решение этой задачи, у вас есть шанс заработать 100 рублей. Если ваше решение будет признано лучшим, деньги ваши! Мы гарантируем выплату!

Всего 2 комментария

SnipCode.ru

ну почему же? все работает )
Комментарий добавлен 28-11-2012 в 19:48:42 ID# 58
Ответить на комментарий пользователя SnipCode.ru

phpguru

Функция отличная только надо бы добавить для utf8 кодировку обработать строку, а то не все понимают как сделать подобное!
$str = iconv_strlen($str,’UTF-8′);
Я так считаю!
13-12-2013 в 12:59:38 ID# 454 посмотреть.

SnipCode.ru

Возможно Вы правы, непонятно только зачем тут iconv_strlen (((
13-12-2013 в 13:02:55 ID# 455 посмотреть.

Сергей

поторопился, так надо в конце, пардон.
return $v[‘pass’];
>
return FALSE;
>

02-12-2013 в 23:33:41 ID# 377 посмотреть.

Сергей

Думаю все же логичней использовать foreach, т.к. можно промахнуться с ключами, а если массив ассоциативный (я раньше делал ключ = дата и время регистрации), то вообще работать не будет.

function search($array,$login)
<
foreach ($array as $k=>$v)
if($v[‘login’] == $login) <
return $v[‘pass’];
>
>
return FALSE;
Так, на минутку.
Время исполнения смысла не имеет, авторизация используется 1 раз, если юзер не параноик)))

02-12-2013 в 23:33:41 ID# 376 посмотреть.

Пабло

Как сделана ваша система рейтинга,с учетом количеством людей,проголосовавших?
11-11-2013 в 17:04:39 ID# 207 посмотреть.

SnipCode.ru

ну. вобщем то все просто: берем общую оценку, делим на кол-во проголосовавших, получаем рейтинг
11-11-2013 в 17:07:06 ID# 208 посмотреть.

Пабло

Да,просто у меня возникли проблемы,при сохранении данных,в бд и отображение количество проголосовавших людей,у вас где нибудь на сайте описано как это сделано или будет?

Мне нужна система рейтинга точно такая же как у вас=)
11-11-2013 в 17:10:56 ID# 209 посмотреть.

KorniloFF

Приведенный код обрезает до первой точки в строке, в случае, если в ней будет их несколько, что не соответствует теме.
Вот код, обрезающий до последней точки:

Виктор

Все отлично работает! Извините , у меня есть задача отрезать после второй и до второй запятой , что нужно поправить в первом примере?
Спасибо!
30-09-2013 в 20:34:07 ID# 204 посмотреть.

25 человек и 63 робота за 24ч
Online: 9 посетителей (15 мин.)
Добро пожаловать!

Как активировать элемент, используя jQuery и JavaScript

Иногда нужно сделать активными или неактивными текстовое поле, радиокнопки или чекбокс. Как сделать это динамически, не перезагружая страницу? Для этого можно использовать JavaScript и jQuery prop . HTML-элемент активируется путем установки свойства disabled в true .

С помощью jQuery можно выбрать элемент, который нужно включить или выключить, и изменить это свойство, используя функции prop() или attr() , в зависимости от того, какая версия jQuery применяется.

Функция prop() была добавлена в jQuery 1.6 и это стандартный метод для работы со свойствами. А функция attr() делает то же самое в jQuery 1.5 и ниже.

Также можно активировать или отключить любой элемент HTML , используя JavaScript . Все, что нужно, это найти элемент по id и установить его свойство disabled в true или false .

Как сделать активным/неактивным текстовое поле с помощью JavaScript

В этом примере есть HTML-форма , текстовые поля и пара кнопок, чтобы делать текстовое поле активным или неактивным. Здесь я использую простой JavaScript , без jQuery prop checked .

Шаги будут следующими:

1. Используйте функции enable() и disable() с кнопками, чтобы включать или выключать текстовое поле.
2. Используйте getElementById() , чтобы получить доступ к текстовому полю.
3. Установите поле disabled в true или false .

Вот пример HTML-файла c решением на основе JavaScript :

При клике по кнопке « Деактивировать текстовое поле » вызывается функция disable() ( не путайте с jQuery prop disabled ), и свойство disabled текстового поля устанавливается в true. Поэтому вы не можете больше вводить текст в это поле, оно не активно. При этом можно заново активировать текстовое поле, кликнув по кнопке « Активировать текстовое поле ». Она вызовет функцию enable() , которая сбросит свойство disabled в false .

Как включить/выключить текстовое поле с помощью jQuery?

Ниже приведен код, основанный на jQuery , который делает то же самое. В этом примере мы использовали функцию prop() . Если вы пользуетесь версией jQuery 1.5 или старше, замените prop() на attr() .

Так же, как и в предыдущем примере, у нас есть две кнопки btn_enable и btn_disable , чтобы включать и выключать текстовое поле. Подключим, обработчик событий, используя функцию click() , которая вызывается при загрузке страницы.

В обработчике события мы находим текстовое поле с помощью селектора ID в jQuery , например, $(«#name») и затем вызываем prop(«disabled», false») , чтобы отключить это текстовое поле.
Когда пользователь нажимает кнопку « включить », мы устанавливаем свойство disabled в true , вызывая jQuery prop(«disabled» , true ). Это заново активирует текстовое поле. Помните, что нельзя ввести текст в отключенное поле.

Можете протестировать это, запустив пример у себя в браузере. Только не вызывайте функцию removeProp() , чтобы заново включить кнопку. Она удалит атрибут « disabled » из текстового поля, поэтому нельзя будет снова его отключить в будущем. Вместо этого используйте метод jQuery prop disabled .

Вот скриншот того, как будет выглядеть страница в браузере вроде Edge или Chrome .

В этом примере мы отключили текстовое поле и заново включили его. Для этого можно использовать JavaScript или jQuery .

Данная публикация представляет собой перевод статьи « How to enable/disable an element using jQuery and JavaScript? Example » , подготовленной дружной командой проекта Интернет-технологии.ру

Источники:

https://obg.kz/kak-sdelat-knopku-neaktivnoy-poka-ne-otmechen-chekboks.html
https://snipcode.ru/catalog.html?snipid=45
https://www.internet-technologies.ru/articles/kak-aktivirovat-element-jquery-i-javascript.html