maxidebox@list.ru | +7 (929) 701 21 71
Как отключить ввод текста по переключателю disabled

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

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

Голосов: 685 | Просмотров: 1450

Заявка на создание сайта

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

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

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

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

Закажите сайт по телефону: +7 (929) 701 21 71