Как активировать элемент, используя 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” был подготовлен дружной командой проекта Сайтостроение от А до Я.