меню

Предисловие

В данном материале будет представлен самый простой способ включения и отключения ввода информации в текстовое поле 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

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

Как отключить ввод текста по переключателю disabled

В данном материале будет представлен самый простой способ включения и отключения ввода информации в текстовое поле INPUT=TEXT с помощью библиотеки jQuery и html атрибута disabled.

Повышение уровня мастерства в JavaScript ES6

Принципы, о которых пойдет речь, являются фундаментальными для этого языка и будут оставаться таковыми независимо от того, какой фреймворк вы используете. Более того, понимание этих концепций окажется бесценным бонусом, когда вы решите изучить или использовать какую-либо популярную библиотеку или фреймворк из арсенала JavaScript.

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

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

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту