Помогите пожалуйста. Как можно по клику на rudiobutton сделать все поля неактивными, т.е. чтобы туда нельзя было ввести текст. Хотелось бы на JS или jQuery это исполнить
<input id="free-pickup-radio" type="radio" name="ship_to_different_address"/>
<label for="free-pickup-radio" class="checkbox">Самовывоз?</label>
<div class="shipping_address" style="display: block;">
<p class="form-row form-row-wide address-field form-group" id="shipping_address_1_field" data-priority=""><label for="shipping_address_1" class="hidden">Адрес</label><input type="text" class="input-text form-control" name="shipping_address_1" id="shipping_address_1" placeholder="Адрес" value=""></p>
<p class="form-row form-row-wide address-field form-group" id="shipping_city_field" data-priority=""><label for="shipping_city" class="hidden">Населённый пункт</label><input type="text" class="input-text form-control" name="shipping_city" id="shipping_city" placeholder="Населённый пункт" value=""></p>
<p class="form-row form-row-wide address-field form-group" id="shipping_state_field" data-priority=""><label for="shipping_state" class="hidden">Область/регион</label><input type="text" class="input-text form-control" value="" placeholder="Область/регион" name="shipping_state" id="shipping_state"></p>
<p class="form-row form-row-wide address-field form-group" id="shipping_postcode_field" data-priority=""><label for="shipping_postcode" class="hidden">Почтовый индекс</label><input type="text" class="input-text form-control" name="shipping_postcode" id="shipping_postcode" placeholder="Почтовый индекс" value=""></p>
</div>
Используйте поиск по id
и свойство disabled
.
Рекомендую заменить radiobutton на checkbox, так как radiobutton нельзя снять (на случай, если пользователь передумал).
let inputDisable = function(value) {
document.getElementById('shipping_address_1').disabled = value;
document.getElementById('shipping_city').disabled = value;
document.getElementById('shipping_state').disabled = value;
document.getElementById('shipping_postcode').disabled = value;
}
<input id="free-pickup-radio" type="radio" name="ship_to_different_address" onchange="inputDisable(true)" checked/>
<label for="free-pickup-radio" class="checkbox">Самовывоз?</label>
<input id="free-pickup-radio" type="radio" name="ship_to_different_address" onchange="inputDisable(false)" />
<label for="free-pickup-radio" class="checkbox">Не самомывоз</label>
<div class="shipping_address" style="display: block;">
<p class="form-row form-row-wide address-field form-group" id="shipping_address_1_field" data-priority="">
<label for="shipping_address_1" class="hidden">Адрес</label>
<input type="text" class="input-text form-control" name="shipping_address_1" id="shipping_address_1" placeholder="Адрес" value="" disabled="true">
</p>
<p class="form-row form-row-wide address-field form-group" id="shipping_city_field" data-priority="">
<label for="shipping_city" class="hidden">Населённый пункт</label>
<input type="text" class="input-text form-control" name="shipping_city" id="shipping_city" placeholder="Населённый пункт" value="" disabled="true">
</p>
<p class="form-row form-row-wide address-field form-group" id="shipping_state_field" data-priority="">
<label for="shipping_state" class="hidden">Область/регион</label>
<input type="text" class="input-text form-control" value="" placeholder="Область/регион" name="shipping_state" id="shipping_state" disabled="true">
</p>
<p class="form-row form-row-wide address-field form-group" id="shipping_postcode_field" data-priority="">
<label for="shipping_postcode" class="hidden">Почтовый индекс</label>
<input type="text" class="input-text form-control" name="shipping_postcode" id="shipping_postcode" placeholder="Почтовый индекс" value="" disabled="true">
</p>
</div>
$(document).on('change', 'input[name="ship_to_different_address"]', function() {
if ($(this).val() == 'not') {
$('.shipping_address input').prop('disabled', true);
} else {
$('.shipping_address input').prop('disabled', false);
}
});
label {
display: block;
}
#shipping_address {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<label for="without_delivery" class="checkbox">
<input id="without_delivery" type="radio" name="ship_to_different_address" value="not" checked="" />Самовывоз?
</label>
<label for="delivery" class="checkbox">
<input id="delivery" type="radio" name="ship_to_different_address" value="yep" />Доставка
</label>
<div class="shipping_address">
<p class="form-row form-row-wide address-field form-group" id="shipping_address_1_field" data-priority="">
<label for="shipping_address_1" class="hidden">Адрес</label>
<input type="text" class="input-text form-control" name="shipping_address_1" id="shipping_address_1" placeholder="Адрес" value="" disabled="true">
</p>
<p class="form-row form-row-wide address-field form-group" id="shipping_city_field" data-priority="">
<label for="shipping_city" class="hidden">Населённый пункт</label>
<input type="text" class="input-text form-control" name="shipping_city" id="shipping_city" placeholder="Населённый пункт" value="" disabled="true">
</p>
<p class="form-row form-row-wide address-field form-group" id="shipping_state_field" data-priority="">
<label for="shipping_state" class="hidden">Область/регион</label>
<input type="text" class="input-text form-control" value="" placeholder="Область/регион" name="shipping_state" id="shipping_state" disabled="true">
</p>
<p class="form-row form-row-wide address-field form-group" id="shipping_postcode_field" data-priority="">
<label for="shipping_postcode" class="hidden">Почтовый индекс</label>
<input type="text" class="input-text form-control" name="shipping_postcode" id="shipping_postcode" placeholder="Почтовый индекс" value="" disabled="true">
</p>
</div>
</form>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть ли разница между <h2><a>content<a/></h2> и <a><h2>content</h2></a>
Имеется вся страница, начиная от <!DOCTYPE html>, заканчивая </html>Как мне эту строку распарсить в объект jQuery что бы у меня получился html?
Я хочу сделать так: 1js/jquery узнаёт позицию скролла страницы (пиксели сверху) 2