Как отключить ввод текста по переключателю disabled
Предисловие
В данном материале будет представлен самый простой способ включения и отключения ввода информации в текстовое поле INPUT=TEXT с помощью библиотеки jQuery и html атрибута disabled.Решение
Подключаем библиотеку jQuery, вставляем в блок HEAD.
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</head>
Наша html разметка: чекбокс и текстовое поле которое нам нужно скрыть.
<div class="box">
<input type="checkbox" id="checkbox" name="checkbox" />
<input class="inp" type="text" name="inp" />
</div>
Немного магии на JS + jQuery
<script>
$(document).ready(function() {
// Данный механизм устанавливает атрибут checked в нашем чекбоксе, где срабатывает условие для самого чекбокса.
$('input[type="checkbox"]' ).on( "click", function() {
if($(this).is(":checked")) {
$(this).attr('cheked', 'cheked');
} else {
$(this).removeAttr('cheked', 'cheked');
}
});
// Механизм который отвечает за отключение и включения ввода информации в поле input=text
$('#checkbox').on('click', function(event) {
if($('#checkbox').is(':checked')) {
$('.box').find('.inp').attr('disabled', 'disabled');
} else {
$('.box').find('.inp').removeAttr('disabled');
}
});
});
<script>
Функции attr()
Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.
Функции removeAttr()
Удаляет указанный атрибут из каждого совпавшего элемента.
Чистый код на JavaScript, 5 рекомендаций которые улучшат Ваш код.
Обработка ошибок в JavaScript. 10 примеров использования конструкции try...catch
Семь необходимых операторов RxJS
Зачем нам нужен TypeScript?
Как исправить ошибку «RangeError: Invalid time value» при вызове метода toISOString даты JavaScript?
Повышение уровня мастерства в JavaScript ES6
Введение в прототипы JavaScript
Сравнение методов require() и import() в JavaScript
Javascript array шпаргалка
Вырезаем изображение с помощью jQuery и PHP
Каррирование в JavaScript
Использование HTML5-элемента audio в JavaScript
Склонение окончаний в словах на Javascript
JavaScript - отслеживание изменения ориентации на мобильных устройствах
Четыре способа плавного скролла до элемента на JavaScript
Разрешаем только ввод цифр в поле input
Вывод последнего дня текущего месяца на Javascript
Понимание синхронного и асинхронного JavaScript с Async/Await
Youtube несколько видео на странице и стоп проигрывания предыдущего видео.
Семь важных функций JavaScript
Что такое ECMAScript и чем это отличается от JavaScript
Контекст выполнения функции в JavaScript
Область видимости в JavaScript
Замыкания в JavaScript
This в JavaScript
Объекты в JavaScript
Определение платформы устройства на javascript
Управление версиями Node.js с помощью nvm в Windows
Три способа понять промисы
Выделяем текущий пункт меню отдельным стилем на jQuery
Восемь типов данных и typeof
Собственные социальные share-кнопки
Как проверить с помощью jQuery и Javascript состояние checkbox
Велосипеды на Javascript и jQuery
Видео самоучитель jQuery от Envato
AJAX и JavaScript. Загрузка контента без перезагрузки страницы
Плавная кнопка "Наверх" на jQuery
Как отключить ввод текста по переключателю disabled
Как избежать повторной загрузки контента Jquery + Ajax + JSON
JavaScript and JQuery 1.8.3 решение проблемы с функцией attr() на примере генератора пароля
Возможно, вам будет интересно
Введение в прототипы JavaScript
Хотя JavaScript не является языком, основанным на классах, и не реализует ООП в традиционном смысле, он предоставляет возможности и шаблоны, которые позволяют использовать концепции объектно-ориентированного программирования.
Семь необходимых операторов RxJS
Как front-end разработчик вы знаете, что управление асинхронными данными - это не легкая задача. Иногда кажется, что нужна целая команда клоунов, чтобы держать все эти мячи в воздухе! Но в этом и заключается сила библиотеки RxJS. Она помогает легко манипулировать потоками асинхронных данных.
Вывод последнего дня текущего месяца на Javascript
Попалась интересная задачка, на баннере нужно было выводить «Акция действует до (тут последний день месяца)», решил сделать это на Javascript, ну чтоб не лазить каждый раз в код для правок, вот что получилось
JavaScript - отслеживание изменения ориентации на мобильных устройствах
Если Ваше мобильное приложение поддерживает только портретную или только горизонтальную ориентацию, то есть большая вероятность того, что некоторые элементы придётся менять, в зависимости от положения устройства.
