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

Голосов: 2032

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

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

Восемь типов данных и typeof

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

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

Введение в прототипы JavaScript

Хотя JavaScript не является языком, основанным на классах, и не реализует ООП в традиционном смысле, он предоставляет возможности и шаблоны, которые позволяют использовать концепции объектно-ориентированного программирования.

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

Javascript array шпаргалка

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

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

Область видимости в JavaScript

Область видимости переменной — это часть контекста выполнения, в котором эта переменная существует. Область видимости определяет, есть ли у вас доступ к переменной в данном контексте выполнения.

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