Как отключить ввод текста по переключателю 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.95
1
2
3
4
5

Голосов: 1996

Чистый код на 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() на примере генератора пароля

Возможно, вам будет интересно

Как проверить с помощью jQuery и Javascript состояние checkbox

Часто возникает ситуация, что на HTML-странице имеется переключатель (checkbox).

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

This в JavaScript

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

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

Контекст выполнения функции в JavaScript

Контекст выполнения функции — это одно из фундаментальных понятий в JavaScript. Контекстом еще часто называют значение переменной this внутри функции. Также иногда путают понятия «контекст выполнения» и «область видимости» — это не одно и то же.

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

JavaScript - отслеживание изменения ориентации на мобильных устройствах

Если Ваше мобильное приложение поддерживает только портретную или только горизонтальную ориентацию, то есть большая вероятность того, что некоторые элементы придётся менять, в зависимости от положения устройства.

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