Как отключить ввод текста по переключателю 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()

Удаляет указанный атрибут из каждого совпавшего элемента.

2.89
1
2
3
4
5

Голосов: 1714

Чистый код на 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, ну чтоб не лазить каждый раз в код для правок, вот что получилось

Читать подробнее

Javascript array шпаргалка

Переменные в Javascript позволяют хранить только одни данные за раз. Однако, учитывая, что часто бывает полезно манипулировать большим количеством данных, концепции переменной иногда недостаточно, потому что становится трудно управлять большим количеством различных переменных.

Читать подробнее

Определение платформы устройства на javascript

Определить версию и тип браузера проще всего при помощи JavaScript. JavaScript имеет стандартный объект под названием navigator, который содержит данные о браузере пользователя.

Читать подробнее