Блог

Главная - Вопросы по программированию - Включить / отключить ввод с помощью радиовхода

Включить / отключить ввод с помощью радиовхода

#javascript #html

#javascript #HTML

Вопрос:

Я хотел бы включить вход, когда радио включено, а затем отключить его, когда он снят.

HTML

 <input id="nam" class="col-md-4 form-check-input" type="radio" name="nam" checked="" data-waschecked="true" onclick="check()"> <
<input id="price" class="form-control" name="price" value="" disabled="disabled">

JS

 $(function(){
    $('input[name="nam"]').click(function(){
        var $radio = $(this);

        if ($radio.data('waschecked') == true)
        {
            $radio.prop('checked', false);
            $radio.data('waschecked', false);
        }
        else
            $radio.data('waschecked', true);

        $radio.siblings('input[type="radio"]').data('waschecked', false);
    });
});

function check() {
    var check = document.getElementById('nam').checked;
    if (check === true){
        document.getElementById('price').removeAttr('disabled');
    }
    else if (check === false){
        document.getElementById('price').attr('disabled','disabled');
    }
}

Есть какие-нибудь идеи?

Заранее благодарю.

Комментарии:

1. как пользователь мог uncheck бы использовать этот переключатель, если бы он решил это сделать?

2. Имеет больше смысла использовать флажок, не так ли?! (По крайней мере, если мы говорим только об одном наборе элементов ofc)

3. Знаете ли вы, что у вас появилось дополнительное < значение после вашего первого элемента ввода, или это просто опечатка в вопросе?

4. Вы пробовали какой-либо из двух методов?

Ответ №1:

 const toggleDisabled = (sel) => {
  const EL_target = document.querySelector(sel);
  EL_target.disabled = !EL_target.disabled;
};

const ELS_toggle = document.querySelectorAll("[data-toggle]");
ELS_toggle.forEach(el => el.addEventListener("change", function() {
  toggleDisabled(this.dataset.toggle);
})); 
 <input data-toggle="#input-1" type="checkbox">
<input id="input-1" name="price" value="">

Ответ №2:

Это то, что вы хотите?

 <input id="price" class="form-control" name="price" disabled>
<input type ="checkbox" onchange = "document.querySelector('#price').disabled = !this.checked">
Метки: