Как активировать элемент, используя 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.

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

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, дизлайки, подписки, отклики!

Данная публикация является переводом статьи «How to enable/disable an element using jQuery and JavaScript? Example» , подготовленная редакцией проекта.

Меню
Posting....