Есть две радиокнопки:
<input type="radio" name="payment" value="nal" checked=""> Наличными<br>
<input type="radio" name="payment" value="beznal"> Безналичными<br>
Есть input:
<input type="text" class="form-control" name="bin" required disabled="">
Как сделать, чтобы при нажатии на radio «безналичными» атрибут инпута disabled отключался, и наоборот, чтобы включался при нажатии на radio «наличными»?
disabled — это не просто атрибут в HTML-коде, это специальное свойство у объекта HTMLInputElement, значение которого имеет тип Boolean, поэтому в jQuery его правильнее всего менять с помощью метода .prop():
$("input").prop('disabled', true);
$("input").prop('disabled', false);
В старых версиях .prop() отсутствует, так что придётся откатываться до .attr() (это некрасиво, но тем не менее тоже работает благодаря специальному костылю).
Включить disabled:
$("input").attr('disabled', 'disabled');
Выключить disabled:
$("input").removeAttr('disabled');
(использовать removeProp для ранее упомянутого специального свойства disabled нельзя!)
О том, что это некрасиво, говорит сама документация jQuery:
[As of jQuery 1.6, ], To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
Если любыми путями достать настоящий DOM-объект (HTMLInputElement), то можно просто взять и поменять у него свойство disabled без всяких jQuery (правда, это будет применимо только к одному элементу за раз, в то время как jQuery умеет переключать disabled сразу пачке элементов, но сейчас не об этом).
Например, если повесить на требуемый элемент обработчик какого-нибудь события (без bind), то значением this там будет DOM-элемент, и тогда:
this.disabled = true;
Или можно достать DOM-элемент из jQuery-объекта:
$('input')[0].disabled = true;
Выше был вольный перевод ответа с английского Stack Overflow с дополнениями. Если применить данные знания к вашей задаче, то получится как-то так:
$('input[name="payment"]').on('click', function(){
$('input[name="bin"]').prop('disabled', $(this).val() != 'beznal');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="payment" value="nal" checked=""> Наличными<br>
<input type="radio" name="payment" value="beznal"> Безналичными<br>
<input type="text" class="form-control" name="bin" required disabled="">
Вот к примеру так. С помощью jquery
$('input[type=radio]').on('click',function(){
if( $(this).val() == 'beznal' ){
$('input[type=text]').removeAttr('disabled');
}
else{
$('input[type=text]').attr('disabled','disabled');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="payment" value="nal" checked=""> Наличными<br>
<input type="radio" name="payment" value="beznal"> Безналичными<br>
<input type="text" class="form-control" name="bin" required disabled="">
Можно так (c очисткой инпута, если вдруг снова выбран вариант "наличными")
$('[type="radio"]').click(function(){
if($(this).val() == 'beznal') {
$('.form-control').attr('disabled', false);
}
else {
$('.form-control').attr('disabled', true);
$('.form-control').val('');
}
})
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<input type="radio" name="payment" value="nal" checked=""> Наличными<br>
<input type="radio" name="payment" value="beznal"> Безналичными<br>
<input type="text" class="form-control" name="bin" required disabled="">
Как развивать веб-проекты в 2026 году: технологии, контент E-E-A-T и факторы доверия
Современные инструменты для криптотрейдинга: как технологии помогают принимать решения
Апостиль в Лос-Анджелесе без лишних нервов и бумажной волокиты
Основные этапы разработки сайта для стоматологической клиники