Как активировать элемент, используя jQuery и JavaScript
Динамическое управление элементами HTML с помощью JavaScript и jQuery позволяет включать или отключать поля, чекбоксы и радиокнопки без перезагрузки страницы. Методы prop() и attr() обеспечивают точный контроль над состоянием элементов.
Вы научитесь корректно активировать и деактивировать элементы, применять эти методы в разных версиях jQuery и создавать интерактивные формы, которые мгновенно реагируют на действия пользователя.
Как сделать активным/неактивным текстовое поле с помощью JavaScript
В этом примере есть HTML-форма, текстовые поля и пара кнопок, чтобы делать текстовое поле активным или неактивным. Здесь я использую простой JavaScript, без jQuery prop checked.
Шаги будут следующими:
- Используйте функции enable() и disable() с кнопками, чтобы включать или выключать текстовое поле.
- Используйте getElementById(), чтобы получить доступ к текстовому полю.
- Установите поле 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.
Комментарии