2 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать кнопку неактивной 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 раз, если юзер не параноик)))

Читать еще:  Как сделать статистику в excel

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 » , подготовленной дружной командой проекта Интернет-технологии.ру

Источники:

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

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector