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()

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

Голосов: 577 | Просмотров: 921