Как сделать кнопку активной js
Обновлено: 07.07.2024
Иногда нужно сделать активными или неактивными текстовое поле, радиокнопки или чекбокс. Как сделать это динамически, не перезагружая страницу? Для этого можно использовать 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 .
Шаги будут следующими:
- Используйте функции enable() и disable() с кнопками, чтобы включать или выключать текстовое поле.
- Используйте getElementById() , чтобы получить доступ к текстовому полю.
- Установите поле disabled в true или false .
Вот пример HTML-файла c решением на основе JavaScript :
Как включить/выключить текстовое поле с помощью jQuery?
Ниже приведен код, основанный на jQuery , который делает то же самое. В этом примере мы использовали функцию prop() . Если вы пользуетесь версией jQuery 1.5 или старше, замените prop() на attr() .
Так же, как и в предыдущем примере, у нас есть две кнопки btn_enable и btn_disable , чтобы включать и выключать текстовое поле. Подключим, обработчик событий, используя функцию click() , которая вызывается при загрузке страницы.
Вот скриншот того, как будет выглядеть страница в браузере вроде Edge или Chrome .
В этом примере мы отключили текстовое поле и заново включили его. Для этого можно использовать JavaScript или jQuery .
Помимо CSS свойств, так же можно изменить другие свойства HTML элементов с помощью jQuery. Например, можно сделать кнопку неактивной (заблокировать).
Когда кнопку делают неактивной, она становится серой и ее невозможно нажать.
В jQuery есть функция .prop() , которая позволяет устанавливать значения атрибутам элементов.
Например, вот так можно сделать неактивными все кнопки:
Сделайте неактивной только кнопку с id target1 .
Есть таблица. Есть кнопка add, которая по нажатию добавляет новую строку к таблице. Хочу сделать так, чтобы кнопка была активна только 1 раз. Или может ее можно как-то скрыть?
На предыдущих уроках по JavaScript, мы научились получать и изменять элементы на страницах. Но зачем это нужно, если можно сразу создать страницу с необходимым HTML кодом? Так мы и делаем всегда - сначала создаем статическую страницу, только одного этого недостаточно. Дело в том, что взаимодействие с пользователем происходит при помощи событий мыши или клавиатуры и нам надо как-то реагировать на эти события.
Статичная кнопка
У меня на сайте есть кнопка, при нажатии на которую ничего не происходит. Как заставить кнопку реагировать на клик пользователя (например менять текст на ней)?
Превращение статичной кнопки в интерактивную
Вот теперь нам пригодится навык поиска элементов на странице.
1) Шаг. Получение элемента, событие которого вы хотите обрабатывать.
Мы хотим обрабатывать событие клика на элементе с идентификатором myBtn. Поэтому объявим переменную buttonElem и при помощи метода getElementById сохраним кнопку в эту переменную.
const buttonElem = document.getElementById('myBtn');
Создадим функцию с логичным названием onButtonClick. Функция должна заменить текст на кнопке, поэтому пропишем в теле функции выражение, которое изменит содержимое тега button. Обратимся к переменной и через свойство textContent заменим надпись на кнопке. Пока на данном этапе, при нажатии на кнопку ничего не происходит. Ведь браузер еще не знает, какую функцию ему вызывать при после клика на кнопку.
let onButtonClick = function() buttonElem.textContent = 'Спасибо за клик'
>
3) Шаг. Связать обработчик события с событием клика и элементом.
Ура! Наш JS код сработал, когда мы нажимаем на кнопку - меняется текст кнопки.
const buttonElem = document.getElementById('myBtn');
let onButtonClick = function() buttonElem.textContent = 'Спасибо за клик'
>
Как работают функции?
В примере используется функция обратного вызова (callback). Отличается она от обычной функции тем, что вызывается сразу после определенного события. В нашем случае, после события клика. Обычная функция выполняется сразу после загрузки страницы или через указанный интервал времени.
Если было бы нужно вызвать функцию без привязки к событиям, то мы добавили бы следующую строчку. Скобки после названия означают вызов функции без привязки к событиям и тогда текст на кнопке изменится сразу после загрузки страницы.
Если убрать скобки, тогда это будет ссылка на функцию, которую мы передаем вторым аргументом при установки слушателя событий. Мы говорим браузеру, что эту функцию нужно будет вызвать, но только после клика пользователя по кнопке. Поэтому у функции обратного вызова нельзя ставить скобки.
В качестве второго аргумента можно передавать анонимную функцию. Анонимная функция не имеет имени и вместо имени вставляется инструкция (код JavaScript), что делает эта функция.
buttonElem.addEventListener('click', function() buttonElem.textContent = 'Спасибо за клик'
>);
Анонимная и именованная функция делают одно и тоже и оба варианта рабочие. Большинство разработчиков используют именованные функции, такой код проще читается. Создание обработчика событий не требует написания много строчек кода и вместо события click, можно привязывать другие события к совершенно разным элементам. А базовые принципы изложены в этой статье.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Это сумасшествие, но я не знаю, как это сделать, и из-за того, насколько распространены эти слова, трудно найти то, что мне нужно в поисковых системах. Я думаю, что это должно быть легко ответить.
Мне нужна простая загрузка файла, которая будет делать так же, как это:
Но я хочу использовать кнопку HTML, например. любой из них:
Аналогично, можно ли запускать простую загрузку через JavaScript?
Я определенно не ищу способ создания якоря, который выглядит как кнопка, использует любые внешние скрипты или беспорядок с заголовками серверов или типом mime.
ОТВЕТЫ
Ответ 1
Для кнопки, которую вы можете сделать
Ответ 2
Вы можете инициировать загрузку с помощью атрибута HTML5 download .
Ответ 3
Ответ 4
С помощью jQuery:
Ответ 5
Старый поток, но в нем отсутствует простое решение js:
Ответ 6
Вы можете сделать это с помощью "трюка" с невидимым iframe. Когда вы устанавливаете для него "src", браузер реагирует так, как будто вы нажимаете ссылку с тем же "href". В отличие от решения с формой, он позволяет встраивать дополнительную логику, например, активировать загрузку после таймаута, когда выполняются некоторые условия и т.д.
Он также очень силен, нет мигания нового окна/вкладки, например, при использовании window.open .
Ответ 7
Bootstrap версия
Документировано в Bootstrap 4, а также работает в Bootstrap 3.
Ответ 8
Ответ 9
Я думаю, что это решение, которое вы искали
У меня был случай, когда мой Javascript сгенерировал CSV файл. Поскольку для его загрузки нет удаленного URL-адреса, я использую следующую реализацию.
Ответ 10
Вы можете скрыть ссылку для загрузки и нажать на нее кнопку.
Ответ 11
Если вы ищете ванильное решение JavaScript (без jQuery) и без использования атрибута HTML5, вы можете попробовать это.
Ответ 12
Это то, что окончательно сработало для меня, так как файл, который нужно загрузить, определялся при загрузке страницы.
JS для обновления атрибута действия формы:
Вызов JS для обновления атрибута действия формы:
Тег формы с кнопкой отправки:
Далее работала НЕ:
вдохновил на ответ @Cfreak, который не является полным
Ответ 17
атрибут загрузки сделать это
Ответ 18
Вы можете добавить тег без текста, но со ссылкой. и когда вы нажимаете кнопку, как в коде, просто запустите функцию $ ("yourlinkclass"). click().
Ответ 19
Вы можете просто использовать:
Ответ 20
Используйте обычную ссылку и создавайте ее как кнопку, используя CSS.
Ответ 21
Ответ 22
Для меня кнопка объявления вместо текста привязки работает очень хорошо.
В большинстве правил это может быть не совсем нормально, но выглядит довольно неплохо.
От автора: кнопка возврата в верхнюю часть страницы позволяет пользователю быстро вернуться в верхнюю часть страницы, не прилагая особых усилий. Это может быть очень полезно, когда на странице много контента или что происходит, например, на одностраничных веб-сайтах, когда используется бесконечная прокрутка, или на мобильных устройствах, где разные размеры экрана могут привести к расширению прокрутки контента.
Эти кнопки обычно размещаются в нижнем углу сайтов, а затем при нажатии возвращают вас в верхнюю часть страницы. Их довольно легко создать с помощью JavaScript. Но визуально мы хотим, чтобы они были ненавязчивыми, однако при этом оставались достаточно большими, чтобы их можно было коснуться или кликнуть. Давайте рассмотрим несколько способов сделать это, начиная с простого, а затем улучшая вещи по ходу.
Читайте также: