Иногда нужно сделать активными или неактивными текстовое поле, радиокнопки или чекбокс. Как сделать это динамически, не перезагружая страницу? Для этого можно использовать 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 :
При клике по кнопке « Деактивировать текстовое поле » вызывается функция 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 » , подготовленной дружной командой проекта Интернет-технологии.ру
Помимо CSS свойств, так же можно изменить другие свойства HTML элементов с помощью jQuery. Например, можно сделать кнопку неактивной (заблокировать).
Когда кнопку делают неактивной, она становится серой и ее невозможно нажать.
В jQuery есть функция .prop() , которая позволяет устанавливать значения атрибутам элементов.
Например, вот так можно сделать неактивными все кнопки:
Сделайте неактивной только кнопку с id target1 .
Есть таблица. Есть кнопка add, которая по нажатию добавляет новую строку к таблице. Хочу сделать так, чтобы кнопка была активна только 1 раз. Или может ее можно как-то скрыть?
Подскажите, как это можно реализовать?
3 ответа 3
В функцию клика, если все-таки надо скрыть.
