Как сделать кнопку неактивной пока не отмечен чекбокс
Обновлено: 08.07.2024
jQuery - делаем неактивной кнопку отправки
Который проверяет значение чекбокса, если один из крыжиков активирован, кнопка должна просыпаться. При загрузке страницы скрипт даёт "ноль по фазе", где может быть ошибка?
| Относись к людям так, как хочешь, чтоб относились к тебе! |
Последний раз редактировалось Вадим Мошев; 15.05.2016 в 12:37 .
Последний раз редактировалось Вадим Мошев; 15.05.2016 в 13:01 .
| Относись к людям так, как хочешь, чтоб относились к тебе! |
С чем это может быть связано?
| Относись к людям так, как хочешь, чтоб относились к тебе! |
Последний раз редактировалось Вадим Мошев; 15.05.2016 в 17:10 .
Не понимаю. Можете скачать библиотеку себе и ссылаться на неё "локально", указав относительный путь.
Имитация клика по чекбоксу с запуском повешенных на него событий.
Узнать количество отмеченных
Обход CheckBox'ов
Выбор всех отмеченных
Получить из всех отмеченных массив значений атрибута value
Обход неотмеченных чекбоксов
Показать или скрыть блок контента по клику на checkbox
Разблокировать кнопку при клике на checkbox
Сменить цвет текста при выборе чекбокса
Только один отмеченный чекбокс
Radio button из chexbox, при выборе одного чекбокса все остальные снимаются.
Комментарии 3
Другие публикации
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
Как сделать неактивные кнопки более дружелюбными для посетителей сайта? Когда они работают хорошо, а когда терпят неудачу? Когда их лучше использовать, а когда стоит избегать. В данной статье мы подробно в этом разберемся.
Сначала разберемся что это за зверь — неактивная кнопка. Это обычная кнопка у которой применен атрибут disabled. В коде это выглядит вот так:
В браузере это будет выглядеть вот так:
Этот подход может очень хорошо работать для некоторых сценариев, но он оказывается катастрофическим шаблоном проектирования для многих других сценариев.
Как пользователи видят заблокированные элементы?
Всякий раз, когда что-либо в интерфейсе отключено, это означает, что что- то не так. Однако это, казалось бы, очевидное наблюдение может быть неочевидным на первый взгляд. Например, что, если вы хотите снять флажок, но интерфейс не позволяет это сделать? в чем именно проблема? Есть ли проблема с вашим интернет-соединением? Есть ли проблемы с правами пользователей? Вам нужно ждать и надеяться на лучшее или лучше обновить страницу? И если вы обновите страницу, все данные сохранятся в форме или исчезнут навсегда?
Когда большие части интерфейса отключены, большинство клиентов будут полагать, что система занята и какой-то процесс происходит в фоновом режиме на странице. И поскольку что-то происходит, они обычно сначала проявляют хорошее терпение. Они просто будут сидеть и ждать, пока появится счетчик или страница, в конце концов, вернется. Чем ценнее ввод, тем дольше они будут сидеть и ждать.
Вы, вероятно, будете вести себя так же. Почему? Оказывается, мы делаем это, чтобы избежать каких-либо сбоев или прерываний текущего процесса.
Однако в конечном итоге даже этот порог будет достигнут, и пользователи будут осторожно перемещать указатель мыши по экрану, или пытаться начать использовать табуляцию на своей клавиатуре, или пытаться прокручивать вверх и вниз на своих мобильных устройствах. Если это не сработает, они перейдут к следующему этапу, пытаясь оживить страницу несколькими десятками упорных щелчков или нажатий.
Причина всех этих проблем в том, что мы, как пользователи, не хотим терять состояние и данные неактивной области страницы.
Когда отключена активность только кнопки
Когда мы сталкиваемся с отключенной кнопкой, ситуация не сильно отличается. Мы заблокированы, но не знаем почему. Возможно, нам не хватает чего-то еще, что необходимо для продвижения вперед. Или мы где-то пропустили какой-то мелкий шрифт. Или, возможно, мы допустили опечатку в одном из полей ввода. Или мы неправильно ввели данные. Или, возможно, с нашей стороны нет никакой ошибки, и это системная ошибка, которая находится вне нашего контроля.
Есть одна проблема, которая возникает, когда пользователи сталкиваются с неактивной кнопкой в конце процесса, особенно на мобильных устройствах. Многие не понимают, была ли кнопка отключена с самого начала или есть что-то в их вводе, что фактически сделало ее отключенной в процессе.
Но если кнопка не станет активной, то скорее всего пользователь покинет страницу либо попытается обратится в службу поддержки. А дело может быть в том, что неправильно введен адрес электронной почты.
Ошибки неактивных кнопок
Приведенные выше примеры указывают на очень распространенную проблему, которая лежит в самой природе многих реализаций. Отключенные кнопки не объясняют, что случилось. Они сообщают, что что-то не так, но очень часто этого просто недостаточно. В результате слишком часто пользователи задаются вопросом, чего на самом деле не хватает, и, следовательно, полностью блокируются.
По своей природе отключенные кнопки также страдают недостаточной контрастностью, поскольку они должны выглядеть иначе, чем обычные кнопки. Их трудно читать, поскольку они обычно неактивны. Они полагаются на JavaScript и встроенную проверку, а также на тот факт, что пользователи могут легко обнаруживать и исправлять ошибки, что может быть сложно сделать, например, в сложной форме на узком экране.
И тогда возникает вопрос о сроках. В какой момент мы должны включить отключенную кнопку? Большинство реализаций включают кнопку только в том случае, если все необходимые данные выглядят правильно сформированными или/и были проверены встроенным валидатором. Это определенно последний момент, чтобы щелкнуть выключателем, но как насчет ситуаций, когда это могло произойти раньше?
Что делать, если клиент открывает свой банковский счет, и ему необходимо подтвердить свой ИНН с некоторыми другими документами? Или, может быть, если какой-то ввод не может быть проверен немедленно, но должен быть проксирован через другую службу, но эта служба продолжает отключаться по таймауту? Или, возможно, некоторые поставщики еще не представили свои окончательные предложения, но проект нужно срочно добавить в систему?
Итак, когда мы должны включать отключенную кнопку?
Большинство из нас согласятся, что первый вариант, вероятно, более очевиден, но только в том случае, если пользователь сможет определить возможность отправки документов позже. Второй вариант, вероятно, повысит конверсию и привлечет больше лидов.
Все это не означает, что отключенных кнопок всегда следует избегать любой ценой. Они хорошо работают, когда служат очень маленькой и очень конкретной цели.
Когда неактивные кнопки работают как надо?
Представьте, что вы покупаете корм для животных. Вы знаете, что есть разные упаковки с разным весом и хотите выбрать какую-нибудь. В этом случае целесообразно сделать отсутствующую упаковку неактивной.
Или, возможно, вы собираетесь перевести большие средства с одного банковского счета на другой. Вы дважды проверили все поля ввода, сумму, получателя, проверили все комиссии, и вы готовы продолжить — к счастью, блестящая зеленая кнопка находится прямо там, ожидая продолжения. И как раз в этот момент, полная сосредоточенности и волнения, ваша мышь ускользает или ваш палец прыгает по сенсорному экрану — и вы дважды нажимаете эту блестящую зеленую кнопку.
Что сейчас произойдет? Вероятно, вы не захотите отправлять средства дважды. И вам не особенно нравятся переходы между вашим приложением с двухфакторной аутентификацией и интерфейсом банка — однако система отправила вам два кода подтверждения, и не очевидно, какой из них вы должны использовать для подтверждения платежа.
Таким образом, отключение кнопки после того, как вы нажмете ее один раз, является хорошим индикатором того, что состояние изменилось , и что что-то происходит, и что больше ничего не нужно делать для продолжения операции, и что вам нужно просто сидеть и подождите, пока интерфейс вернется. Вот где полезны отключенные кнопки.
Такой вариант мы сделали на сайте по перевозке пассажиров для одного из наших клиентов:
Или мы можем пойти еще дальше, автоматически отправив электронное письмо в службу поддержки клиентов со всеми данными, введенными в форму от имени клиента, с возможностью перезвонить или ответить по электронной почте.
Эти незначительные изменения не приведут к отказу полностью, но, по крайней мере, дадут нам шанс сохранить клиента на случай, если он не сможет продолжить.
Альтернатива неактивным кнопкам
Ниже представлена хорошая общая стратегия, которая всегда работает без каких-либо проблем с юзабилити:
Простой, понятный, доступный, легкий в реализации и без какой-либо зависимости от кода способ для безупречной работы, чтобы вернуть отключенную кнопку к жизни.
Показывай только то, что можно использовать
Всегда задавайте себе как разработчику вопросы. Насколько важно для пользователя сейчас получить доступ к отключенному элементу? Нужно ли им знать, что им что-то недоступно? Имеет ли значение отображение отключенного действия? Смогут ли они без него выполнить задачу?
Рассмотрите возможность удаления недоступных или неприменимых параметров. Покажите действия, которые актуальны и полезны только для пользователя в данный момент.
Если у вас есть случаи проблем с неактивными кнопками или другими элементами, было бы интересно об этом узнать. Напишите о ваших наблюдениях в комментариях.
В этой небольшой статье мы рассмотрим, как заблокировать кнопку отправки данных формы только в том случае, когда не заполнено одно поле ввода. Тем не менее, этот прием будет работать и для нескольких полей ввода, но при этом нужно соблюдать одно важное условие - все поля ввода должны быть прямыми потомками элемента
А теперь добавим немного магии CSS:
Трюк заключается в использовании псевдо-классов :valid и :invalid, управляющих валидацие полей ввода. В случае, когда данные в поле ввода не введены, активен :invalid, блокирующий кнопку. Если данные введены :valid сделает кнопку кликабельной:
А вот и результат на codepen:
Спасибо за внимание.
Читайте также: