Как заблокировать input, если выбрано «нет» в radio button?

Question

[Samalamadoit]

Надо чтобы когда я выбираю "нет", то input с полем для ввода был заблокирован. А когда да, то разблокировался.
Вот код:

<div class="calculator-form__label">
                            <span>Пополнение вклада</span>
                            <label>
                                <input type="radio" name="replenishment-deposit" value="1" checked>
                                Да
                            </label>
                            <label>
                                <input type="radio" name="replenishment-deposit" value="0">
                                Нет
                            </label>
                        </div>

<input id="deposit-replenishment-amount" type="number" name="deposit-replenishment-amount" class="calculator-form__input">

if ( $('input[type="radio"]:checked').val() == 1 ) {
        $("#deposit-replenishment-amount").prop("disabled", false);
    }
    else if ( $('input[type="radio"]:checked').val() == 0 ) {
        $("#deposit-replenishment-amount").prop("disabled", true);
    }

Answer 1

[0xD34F]

блок_с_радиокнопками.addEventListener('change', e => инпут.disabled = !+e.target.value);

Answer 2

[zkrvndm]

Выше вам предложили вариант на JavaScript, но но правде говоря существует еще решение на чистом CSS. Для блокировки вы можете использовать стиль pointer-events: none совместно с CSS селектором ~ и CSS пседо-классом :checked. Разумеется, это сработает только в том случае, если ваши радио-кнопки находятся на том же уровне вложенности, что и блокируемое поле ввода. Если вам нужно, чтобы ваша форма работала даже при отключенном JavaScript, то это хороший вариант.

HTML-код с примером:

<input type="radio" name="replenishment-deposit" value="1" checked>
<input id="net" type="radio" name="replenishment-deposit" value="0">
<input id="deposit-replenishment-amount" type="number" name="deposit-replenishment-amount" class="calculator-form__input">

CSS-стили для блокирования по условию:

#net:checked ~ #deposit-replenishment-amount {
    pointer-events: none;
}

Comments

[WapSter]

Решение так себе и довольно костыльное, сильно страдает доступность. Но а так да вполне рабочий вариант.