Как отключить и включить input с помощью jQuery: полный гайд

Как отключить и включить input с помощью jQuery? Гайд для начинающих и не только

Представь ситуацию: ты создаёшь форму регистрации, и пока пользователь не выбрал страну, поле «Город» должно быть заблокировано. Или у тебя интернет-магазин, и кнопка «Оформить заказ» неактивна, пока не проставлена галочка согласия. Знакомо? Эта задача — хлеб с маслом любого фронтенд-разработчика. И сегодня мы разберём её под микроскопом.

Вопрос «Disable/enable an input with jQuery?» — один из самых популярных на Stack Overflow (тысячи просмотров и десятки ответов). И это не случайно: кажущаяся простота скрывает несколько граблей, на которые наступают новички. В этом руководстве мы не просто покажем код — мы научим тебя мыслить как jQuery-ниндзя. Поехали!

Почему не стоит использовать .attr() для disabled?

Если ты уже гуглил решение, то наверняка видел старые советы вроде $('input').attr('disabled', 'disabled');. Это работало в эпоху jQuery 1.x, но сегодня — это путь в никуда. Почему?

• .attr() работает с атрибутами HTML, а .prop() — со свойствами DOM-объекта.
• Атрибут disabled — это булево свойство, которое должно быть true или false, а не строкой.
• При использовании .attr('disabled', false) jQuery может просто удалить атрибут, но не всегда корректно сбросить состояние.

Современный стандарт — использовать .prop(). Запомни это как «Отче наш»:

// Отключить input
$('#myInput').prop('disabled', true);

// Включить input обратно
$('#myInput').prop('disabled', false);

Просто, правда? Но давай копнём глубже.

Базовые примеры: отключаем и включаем один input

Допустим, у нас есть поле ввода email и кнопка-триггер. Мы хотим, чтобы по нажатию кнопки поле блокировалось или разблокировалось.

<input type="email" id="emailInput" placeholder="Введите email">
<button id="toggleBtn">Заблокировать поле</button>

<script>
$(document).ready(function() {
    $('#toggleBtn').on('click', function() {
        var $input = $('#emailInput');
        var isDisabled = $input.prop('disabled');
        
        // Переключаем состояние
        $input.prop('disabled', !isDisabled);
        
        // Меняем текст кнопки
        $(this).text(isDisabled ? 'Заблокировать поле' : 'Разблокировать поле');
    });
});
</script>

Обрати внимание: мы используем $(document).ready() — это гарантирует, что DOM загружен до выполнения скрипта. Без этого твой код может не найти элементы.

Работа с группой элементов: select, checkbox и textarea

Метод .prop() универсален. Он работает не только с <input>, но и с <select>, <textarea>, <button> и даже с целыми наборами элементов.

Блокируем все элементы формы разом

Представь, что нужно заблокировать всю форму после отправки, чтобы пользователь не менял данные:

<form id="myForm">
    <input type="text" name="name" placeholder="Имя">
    <input type="email" name="email" placeholder="Email">
    <select name="country">
        <option value="">Выберите страну</option>
        <option value="ru">Россия</option>
        <option value="us">США</option>
    </select>
    <button type="submit">Отправить</button>
</form>

<script>
// Блокируем все input, select и textarea внутри формы
$('#myForm').find('input, select, textarea, button').prop('disabled', true);
</script>

Можно ещё элегантнее: использовать :input — это псевдо-селектор jQuery, который выбирает все элементы форм (input, textarea, select, button).

$('#myForm :input').prop('disabled', true); // Обрати внимание на пробел!

Блокируем только чекбоксы

Иногда нужно заблокировать только определённый тип. Например, чекбоксы в группе:

$('input[type="checkbox"]').prop('disabled', true);

Живой пример: форма с зависимыми полями

Вернёмся к примеру из начала статьи. Сделаем форму, где при выборе страны подгружается список городов, и пока страна не выбрана — поле «Город» заблокировано.

<select id="countrySelect">
    <option value="">-- Выберите страну --</option>
    <option value="ru">Россия</option>
    <option value="us">США</option>
</select>

<select id="citySelect" disabled>
    <option value="">Сначала выберите страну</option>
</select>

<script>
$(document).ready(function() {
    var cities = {
        ru: ['Москва', 'Санкт-Петербург', 'Казань'],
        us: ['Нью-Йорк', 'Лос-Анджелес', 'Чикаго']
    };

    $('#countrySelect').on('change', function() {
        var country = $(this).val();
        var $citySelect = $('#citySelect');
        
        if (country) {
            // Очищаем и наполняем города
            $citySelect.empty().append('<option value="">Выберите город</option>');
            $.each(cities[country], function(index, city) {
                $citySelect.append('<option value="' + city + '">' + city + '</option>');
            });
            // Включаем поле
            $citySelect.prop('disabled', false);
        } else {
            // Блокируем и сбрасываем
            $citySelect.prop('disabled', true).empty()
                .append('<option value="">Сначала выберите страну</option>');
        }
    });
});
</script>

Красота? Пользователь не может случайно выбрать город, не указав страну. А мы управляем состоянием элемента одной строчкой.

Работа с кнопками: блокируем двойной клик

Одна из самых частых задач — предотвратить повторную отправку формы, пока обрабатывается запрос. Решение:

$('#submitBtn').on('click', function() {
    var $btn = $(this);
    $btn.prop('disabled', true).text('Отправка...');
    
    // Имитация асинхронного запроса
    setTimeout(function() {
        $btn.prop('disabled', false).text('Отправить');
        alert('Форма отправлена!');
    }, 3000);
});