как сделать кнопку неактивной js
Чтобы сделать кнопку неактивной, нужно добавить ей атрибут disabled :
// создаем кнопку const btn = document.createElement('button'); // добавляем ей атрибут disabled btn.setAttribute('disabled', ''); // добавляем надпись btn.textContent = 'Неактивная кнопка' // добавляем кнопку на страницу document.body.append(btn); Кнопка будет отображаться серой и недоступной для нажатия. Кроме того, она не может получить фокус путем нажатия на клавишу Tab или другим способом.
Как активировать или отключить кнопку с помощью чистого JavaScript и jQuery
В этой статье мы обсудим способы включения и отключения кнопки. Сначала мы рассмотрим, как это делается с помощью простого JavaScript, а затем разберемся, как данный процесс выглядит в случае использования jQuery.
JavaScript – один из самых популярных языков программирования, применяемых в веб-разработке. Он используется на большинстве сайтов, и все современные браузеры поддерживают его по умолчанию. В этом руководстве мы рассмотрим полезные приемы, которые помогут вам освоить разработку на JavaScript.
К примеру, при создании сайта на основе JavaScript очень часто требуется включать или отключать кнопки в зависимости от каких-то событий. Как правило, подобная необходимость возникает при разработке форм и анкет: кнопка отправки данных должна оставаться неактивной, пока пользователь не заполнит все обязательные поля. После того, как необходимая информация будет введена, кнопка должна стать активной, чтобы пользователь мог нажать на нее и отправить данные на сервер.
В HTML для кнопок предусмотрено собственное состояние, и таким образом, вы можете активировать или отключать кнопки по желанию. К примеру, во время загрузки формы на странице можно деактивировать кнопку, а затем включить ее с помощью JavaScript.
Сейчас на конкретных примерах мы рассмотрим, как можно включать и отключать кнопки с помощью JavaScript.
Обновлено: 2023-06-30 19:09:21 Наталья Кайда автор материала
Включение и отключение кнопки на чистом JavaScript
В этом разделе мы разберем пример кода на чистом JavaScript, который активирует и отключает кнопку. Посмотрите на приведенный ниже фрагмент кода:
Данный код создает простейшую форму с двумя полями для ввода текста и кнопкой для отправки введенных данных на сервер. Важно отметить, что во время загрузки страницы кнопка формы находится в отключенном состоянии – для этого в коде по умолчанию используется свойство disabled .
После загрузки формы в коде предусмотрено событие onchange , связанное с изменением состояния текстовых полей для ввода имени и пароля пользователя. Как только пользователь введет какие-либо данные в любое из этих полей, событие onchange сработает, и вызовет функцию включения и отключения кнопки toggleButton .
Функция toggleButton проверяет, ввел ли пользователь данные в оба обязательных поля. Если пользователь ввел имя и пароль, функция изменит состояние disabled на false , что в итоге приведет к активации кнопки отправки введенных данных. Если же одно из обязательных полей осталось незаполненным, свойство disabled получает параметр true , и как следствие этого, кнопка остается неактивной.
В приведенном выше примере для создания кнопки используется элемент , но при желании также можно использовать HTML-кнопку , как показано ниже:
Submit
Вот так и выглядит активация и отключение кнопки на чистом JavaScript. В следующем разделе мы рассмотрим, как включать и отключать кнопки при работе с библиотекой jQuery.
Активация и отключение кнопок на jQuery
Теперь разберемся, как реализовать включение и деактивацию кнопок при помощи библиотеки jQuery. Для этого обратимся к примеру кода из предыдущего раздела. Далее показано как выглядит код при использовании jQuery:
Прежде всего, данный код загружает библиотеку jQuery, чтобы мы могли воспользоваться ее средствами для реализации нашей функции. Для изменения состояния кнопки в данном случае используется метод jQuery-объекта, attr .
Метод attr используется в jQuery для установления и получения значений определенных атрибутов элемента. Если передать методу один аргумент, он вернет значение атрибута объекта. При использовании двух аргументов метод установит новое значение атрибута. В нашем случае метод используется для задания значения disabled атрибуту кнопки. Весь остальной код остается без изменений.
Если вы работаете с jQuery 1.5+, вместо метода attr следует использовать prop , как показано во фрагменте кода, приведенном ниже:
//. $('#submitButton').prop('disabled', true);
Если же вам потребуется удалить какой-то из атрибутов элемента, можно воспользоваться методом removeAttr . Результат будет таким же, что и при использовании параметра false для свойства disabled :
//. $('#submitButton').removeAttr('disabled');
Заключение
В этом руководстве на двух конкретных примерах мы рассмотрели различные способы активации и отключения кнопки – с помощью чистого JavaScript, и с использованием библиотеки jQuery.
Наталья Кайда автор-переводчик статьи « How to Enable or Disable a Button With JavaScript: jQuery vs. Vanilla »
Как заблокировать нажатие кнопки на JS?
Задача: если не заполнено одно — не дать отправить форму. Варианта 2: 1) не дать нажать 2) дать нажать, но показать сообщение что данные заполнены некорректно и тут надо как-то отменить нажатие иначе форма всё же уйдёт на сервер В первом случае надо ловить наведение курсора на кнопку, менять курсор, type submit и выводить сообщение? Во втором случае вопрос как отменить отправку?
Отслеживать
задан 9 авг 2017 в 5:16
868 4 4 золотых знака 11 11 серебряных знаков 25 25 бронзовых знаков
9 авг 2017 в 5:23
9 авг 2017 в 6:31
@Visman спасибо, про это всё зднаю, этот input имеет тип hidden поэтому юзер просто не поймёт что от него хотят при использовании того на что вы ссылаетесь, требуется более явно, более выразительно
9 авг 2017 в 6:59
@soledar10 агонь конечно, такая штука заслуживает плюса, хоть и не уведомляет пользователя что конкретно неправильно если полей несколько
Как заблокировать кнопку submit с помощью JS?
Менять я в ней нечего не могу, т.к. какой-то сторонний скрипт добавляет её, исходя из определенного события.
Моя задача состоит в том, чтобы заблокировать кнопку (submit) по нажатию на неё, чтобы пользователь не отправлял данные формы несколько раз. В JS я не силен, пытался сделать так:
$("#submit").onclick(function () < $(".submit").setAttribute(disabled); >);Не работает, может кто-то подскажет?)
- Вопрос задан более трёх лет назад
- 2506 просмотров
Комментировать
Решения вопроса 2
Тигран Абрамян @TAbrahamyan
document.querySelector(".button").addEventListener("click", function() < this.disabled = true; >)Ответ написан более трёх лет назад