Как активировать элемент, используя jQuery и JavaScript

Иногда необходимо сделать активными или неактивными текстовое поле ввода, радиокнопки или чекбокс. Как сделать это динамически, не перезагружая страницу? Для этого можно без труда использовать 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.

Шаги будут следующими:

  1. Используйте возможности enable() и disable() с кнопками, чтобы включать или выключать текстовое поле ввода.
  2. Используйте getElementById(), чтобы приобрести доступ к текстовому полю ввода.
  3. Установите поле ввода disabled в true или false.

Вот пример HTML-файла c решением на основе JavaScript:

<html><head><title>Как включать или выключать ввод при помощи JavaScript</title></head><body><h2>Включение и выключение ввода при помощи JavaScript</h2><form id="registration-form">Введите имя: <input type="text" id="name"></form><button onclick="disable()">Деактивировать текстовое поле ввода</button><button onclick="enable()">Активировать текстовое поле ввода</button><script>function disable() {document.getElementById("name").disabled = true;}function enable() {document.getElementById("name").disabled = false;}</script></body></html>

При клике по кнопке «Деактивировать текстовое поле ввода» вызывается функцию 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). Это заново активирует текстовое поле ввода. Помните, что нельзя ввести текст в отключенное поле ввода.

<html><head><title>Как включить или выключить текстовое поле ввода при помощи jQuery</title></head><body><h2> Включение и выключение текстового поля ввода, используя jQuery</h2><form id="registration-form">Введите имя: <input type="text" id="name"></form><button id="btn_disable" >Выключить ввод</button><button id="btn_enable" >Включить ввод</button><script src="http://code.jquery.com/jquery-1.6.2.min.js"></script><script>$(document).ready(function() {$("#btn_enable").click(function(){$("#name").prop("disabled", false);});$("#btn_disable").click(function(){$("#name").prop("disabled", true);});});</script></body></html>

Можете протестировать это, запустив пример у себя в браузере. Только не вызывайте возможность removeProp(), чтобы заново включить кнопку. Она удалит атрибут « disabled » из текстового поля ввода, так что нельзя будет снова его отключить в будущем. Вместо этого используйте способ jQuery prop disabled.

Вот скриншот того, как будет выглядеть страница в браузере вроде Edge или Chrome.

Как активировать элемент, используя jQuery и JavaScript

В этом примере мы отключили текстовое поле ввода и заново включили его. Для этого можно использовать JavaScript или jQuery.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *