Как отключить и включить поле ввода (input) с помощью jQuery?

Правильный способ: используйте метод .prop()

Вы столкнулись с классической ловушкой начинающих разработчиков jQuery. Проблема в том, что вы используете метод .attr() для управления булевыми атрибутами, такими как disabled, checked или selected. Дело в том, что .attr() работает с атрибутами HTML (то, что вы видите в исходном коде страницы), а .prop() — со свойствами DOM-элемента (текущее состояние в памяти браузера).

Для атрибута disabled разница критична:

• Установка через .attr('disabled', true) — добавляет атрибут disabled="disabled" в HTML. Поле блокируется.
• Установка через .attr('disabled', false) — НЕ удаляет атрибут полностью. В некоторых браузерах (особенно старых версиях) он просто меняет значение на disabled="false", что всё ещё считается истинным значением, и поле остаётся заблокированным.

Метод .prop() работает с логическим свойством disabled напрямую. Установка .prop('disabled', true) блокирует поле, а .prop('disabled', false) — гарантированно разблокирует.

Решение вашей задачи

Вот исправленный и полностью рабочий код:

$(document).ready(function() {
    $('#agreeCheckbox').on('change', function() {
        // Проверяем, отмечен ли чекбокс
        var isChecked = $(this).prop('checked');
        
        // Устанавливаем свойство disabled для поля ввода
        $('#promoInput').prop('disabled', !isChecked);
    });
});

Объяснение:

• $(this).prop('checked') — возвращает true, если чекбокс отмечен, и false в противном случае.
• Оператор ! инвертирует значение: когда чекбокс отмечен (true), мы передаём false в .prop('disabled', false) — поле активируется. Когда чекбокс не отмечен (false), мы передаём true — поле блокируется.

Альтернативный вариант с использованием тернарного оператора

Можно записать короче, но суть та же:

$('#agreeCheckbox').on('change', function() {
    $('#promoInput').prop('disabled', !$(this).prop('checked'));
});

Проверка: как увидеть разницу

Чтобы убедиться, что .prop() работает, а .attr() — нет, выполните в консоли браузера:

// Плохой способ (не используйте!)
$('#promoInput').attr('disabled', false);
console.log($('#promoInput').attr('disabled')); // Выведет "disabled" или "false", но поле останется серым

// Хороший способ
$('#promoInput').prop('disabled', false);
console.log($('#promoInput').prop('disabled')); // Выведет false, поле станет активным

В современных версиях jQuery (1.6+) рекомендуется всегда использовать .prop() для булевых атрибутов. Метод .attr() оставлен для работы с пользовательскими атрибутами данных (data-*) и для чтения значений атрибутов, которые не являются булевыми (например, href, src).

Надеюсь, теперь всё стало понятно! Ваш код будет работать стабильно во всех браузерах.

.input-disabled {
    opacity: 0.5;
    pointer-events: none;
    background-color: #f0f0f0;
}

$(document).ready(function() {
    $('#agreeCheckbox').on('change', function() {
        $('#promoInput').toggleClass('input-disabled', !$(this).prop('checked'));
    });
});

$('#agreeCheckbox').on('change', function() {
    var isChecked = $(this).prop('checked');
    $('#promoInput')
        .prop('disabled', !isChecked)
        .toggleClass('input-disabled', !isChecked);
});