Как активировать или отключить кнопку с помощью чистого JavaScript и jQuery
В этой статье мы обсудим способы включения и отключения кнопки. Сначала мы рассмотрим, как это делается с помощью простого JavaScript, а затем разберемся, как данный процесс выглядит в случае использования jQuery.
JavaScript – один из самых популярных языков программирования, применяемых в веб-разработке. Он используется на большинстве сайтов, и все современные браузеры поддерживают его по умолчанию. В этом руководстве мы рассмотрим полезные приемы, которые помогут вам освоить разработку на JavaScript.
К примеру, при создании сайта на основе JavaScript очень часто требуется включать или отключать кнопки в зависимости от каких-то событий. Как правило, подобная необходимость возникает при разработке форм и анкет: кнопка отправки данных должна оставаться неактивной, пока пользователь не заполнит все обязательные поля. После того, как необходимая информация будет введена, кнопка должна стать активной, чтобы пользователь мог нажать на нее и отправить данные на сервер.
В HTML для кнопок предусмотрено собственное состояние, и таким образом, вы можете активировать или отключать кнопки по желанию. К примеру, во время загрузки формы на странице можно деактивировать кнопку, а затем включить ее с помощью JavaScript.
Сейчас на конкретных примерах мы рассмотрим, как можно включать и отключать кнопки с помощью JavaScript.
Включение и отключение кнопки на чистом JavaScript
В этом разделе мы разберем пример кода на чистом JavaScript, который активирует и отключает кнопку. Посмотрите на приведенный ниже фрагмент кода:
Данный код создает простейшую форму с двумя полями для ввода текста и кнопкой для отправки введенных данных на сервер. Важно отметить, что во время загрузки страницы кнопка формы находится в отключенном состоянии – для этого в коде по умолчанию используется свойство disabled .
После загрузки формы в коде предусмотрено событие onchange , связанное с изменением состояния текстовых полей для ввода имени и пароля пользователя. Как только пользователь введет какие-либо данные в любое из этих полей, событие onchange сработает, и вызовет функцию включения и отключения кнопки toggleButton .
Функция toggleButton проверяет, ввел ли пользователь данные в оба обязательных поля. Если пользователь ввел имя и пароль, функция изменит состояние disabled на false , что в итоге приведет к активации кнопки отправки введенных данных. Если же одно из обязательных полей осталось незаполненным, свойство disabled получает параметр true , и как следствие этого, кнопка остается неактивной.
В приведенном выше примере для создания кнопки используется элемент <input> , но при желании также можно использовать HTML-кнопку <button> , как показано ниже:
Вот так и выглядит активация и отключение кнопки на чистом JavaScript. В следующем разделе мы рассмотрим, как включать и отключать кнопки при работе с библиотекой jQuery.
Активация и отключение кнопок на jQuery
Теперь разберемся, как реализовать включение и деактивацию кнопок при помощи библиотеки jQuery. Для этого обратимся к примеру кода из предыдущего раздела. Далее показано как выглядит код при использовании jQuery:
Прежде всего, данный код загружает библиотеку jQuery, чтобы мы могли воспользоваться ее средствами для реализации нашей функции. Для изменения состояния кнопки в данном случае используется метод jQuery-объекта, attr .
Метод attr используется в jQuery для установления и получения значений определенных атрибутов элемента. Если передать методу один аргумент, он вернет значение атрибута объекта. При использовании двух аргументов метод установит новое значение атрибута. В нашем случае метод используется для задания значения disabled атрибуту кнопки. Весь остальной код остается без изменений.
Если вы работаете с jQuery 1.5+, вместо метода attr следует использовать prop , как показано во фрагменте кода, приведенном ниже:
Если же вам потребуется удалить какой-то из атрибутов элемента, можно воспользоваться методом removeAttr . Результат будет таким же, что и при использовании параметра false для свойства disabled :
Заключение
В этом руководстве на двух конкретных примерах мы рассмотрели различные способы активации и отключения кнопки – с помощью чистого JavaScript, и с использованием библиотеки jQuery.
Пожалуйста, опубликуйте ваши мнения по текущей теме материала. Мы очень благодарим вас за ваши комментарии, подписки, дизлайки, отклики, лайки!
Наталья Кайда автор-переводчик статьи « How to Enable or Disable a Button With JavaScript: jQuery vs. Vanilla »
Задизейблить что это в программировании
Сообщение TeaPot » 08 сен 2017, 15:20
professor
Сообщения: 3774 Зарегистрирован: 17 фев 2013, 16:33 Награды: 4 Версия LabVIEW: 2.5 — 2021 Благодарил (а): 6 раз Поблагодарили: 74 раза Контактная информация:
Re: Задизейблить много кнопок за раз
Сообщение dadreamer » 08 сен 2017, 16:07
expert
Сообщения: 1214 Зарегистрирован: 21 фев 2011, 23:44 Награды: 2 Версия LabVIEW: 2013-2020 Благодарил (а): 23 раза Поблагодарили: 27 раз Контактная информация:
Re: Задизейблить много кнопок за раз
Сообщение Kosist » 09 сен 2017, 09:38
В 
2016 и выше можно использовать вот этот тулкит — https://forums.ni.com/t5/UI-Interest-Gr . -p/3539490. Тогда проперти ноды вообще не будут нужны.
professor
Сообщения: 3774 Зарегистрирован: 17 фев 2013, 16:33 Награды: 4 Версия LabVIEW: 2.5 — 2021 Благодарил (а): 6 раз Поблагодарили: 74 раза Контактная информация:
Re: Задизейблить много кнопок за раз
Сообщение dadreamer » 09 сен 2017, 13:08
doctor
Сообщения: 2894 Зарегистрирован: 31 июл 2011, 23:05 Награды: 2 Версия LabVIEW: 12-18 Благодарил (а): 27 раз Поблагодарили: 117 раз Контактная информация:
Re: Задизейблить много кнопок за раз
Сообщение Artem.spb » 09 сен 2017, 23:29
во внутреннем цикле незачем перебирать все значения, лучше остановиться, как только искомая строка найдена.
С полгода назад возникла у меня задача в проекте реализовать некий внутренний поиск по большим объёмам данных. Например, есть массив кластеров [имя элемента — его параметры]. И мне нужен элемент определённого имени. Если в лоб, то это перебор в цикле, что довольно долго.
В том проекте данных довольно много, поэтому я остановился на варианте SQLite, живущего в памяти, но тогда же открыл для себя мощь типа Variant.
В нём есть неограниченное количество атрибутов любого типа, чем и можно лихо воспользоваться.
Почитав этот пост, озадачился тестом.
И вот что получается
сам исходник
Итог: время доступа к свойствам variant не зависит от количества этих свойств, а вот при переборе зависимость очевидна.
Не спорю, пример экзотический, 800 контролов вряд ли кто-то размещает (хотя, сколько кнопок-труб-цифровых индикаторов было в том проекте на каждом экране, я не считал). Да и при переборе через свойство больше ресурсов уходит на получение самого ресурса, чем на сравнение, но всё же.
И если уж тестировать, то до конца.
Вот тесты, не зависящие от доступа к UI. В массиве 1000 элементов. поиск последних на 3 порядка дольше, чем извлечение оных из Variant
Как задизейблить кнопки в форме VS2015
Имеется форма на WinForms. На форме есть кнопочки. Для них написана процедура их отключения. Можно ли включить их обратно после введения данных в определённый TextBox ?
Можно ли включить их обратно после введения данных в определённый TextBox
В вашем вопросе выражение «после введения данных» означает привязку на какое-то событие во времени. Как например, выйти на перемену после звонка или уйти после уроков. Для этого в языке c# предусмотрены события. Как правило подобного рода задачи решаются с помощью них. Обычно в Win forms у каждого элемента управления есть свой необходимый набор событий. В вашем случае для TextBox существуют такие события как KeyUp (которое срабатывает в тот момент, когда вы отпускаете клавишу на клавиатуре) и LostFocus (срабатывает, если текущий элемент управления потерял фокус). Список событий для TextBox можно увидеть тут. Для того, чтобы подписаться на событие вам нужно в дизайнере у вашего контрола зайти в окно Properties нажать на кнопку событий и щелкнуть 2 раза ЛКМ на необходимом вам событии. Будет добавлен примерно следующий код: