Как ограничить переключение радио-кнопок 2-мя и включить первую из них?
Добрый день!
Помогите, пожалуйста, решить проблему. Есть 2 формы с радио-кнопками. Выбор способов доставки:
По умолчанию выбран первый 1-й (Наличными) Для СПб доступны все способы оплаты. Для России доступны только 3-й (Картой онлайн) и 4-й (Через банк) способы оплаты. Как это реализовать? Пока что я лишь смог при выборе доставки по России скрыть при помощи display none первые 2 пункта оплаты и выбрать оплату 3-м способом при помощи .checked=true. А проблема тут в том, что 4-й способ оплаты тоже возможен, но его выбрать скрипт уже не даёт, переключает сразу на 3-й способ. Пишу так:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript">
$(".form-radio").change(function() {
if ($("#sposob-polucheniya-2").is(":checked")) {
$('#payment-method-1').hide();
$('#payment-method-2').hide();
document.getElementById("payment-method-3").checked=true;
}
});
</script>
Как то это можно решить? |
Oleg0,
рисуйте html -- минимум и желательно без id, классы только |
Цитата:
Вот html, подсократил его. Классы у всех одинаковые. Доставка: <input type="radio" id="sposob-polucheniya-1" name="panes[webform_nid3005][0][___sposob_polucheniya]" value="sankt_piter" class="form-radio"> <input type="radio" id="sposob-polucheniya-2" name="panes[webform_nid3005][0][___sposob_polucheniya]" value="ozon" checked="checked" class="form-radio"> Оплата: <input type="radio" id="payment-method-1" name="panes[payment][payment_method]" value="cod" checked="checked" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio"> <input type="radio" id="payment-method-2" name="panes[payment][payment_method]" value="check" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio"> <input type="radio" id="payment-method-3" name="panes[payment][payment_method]" value="check1" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio"> <input type="radio" id="payment-method-4" name="panes[payment][payment_method]" value="other" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio"> |
Oleg0,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#sposob-polucheniya-2:checked~#payment-method-1,
#sposob-polucheniya-2:checked~#payment-method-2 {
display: none;
}
</style>
</head>
<body>
<input type="radio" id="sposob-polucheniya-1" name="panes[webform_nid3005][0][___sposob_polucheniya]" value="sankt_piter" class="form-radio">
<input type="radio" id="sposob-polucheniya-2" name="panes[webform_nid3005][0][___sposob_polucheniya]" value="ozon" checked="checked" class="form-radio"> Оплата:
<input type="radio" id="payment-method-1" name="panes[payment][payment_method]" value="cod" checked="checked" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio">
<input type="radio" id="payment-method-2" name="panes[payment][payment_method]" value="check" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio">
<input type="radio" id="payment-method-3" name="panes[payment][payment_method]" value="check1" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio">
<input type="radio" id="payment-method-4" name="panes[payment][payment_method]" value="other" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio">
</body>
</html>
|
Oleg0,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
label.hide {
display: none;
}
</style>
<script>
document.addEventListener("click", function({
target
}) {
if (target = target.closest('[name="panes[webform_nid3005][0][___sposob_polucheniya]"]')) {
let hide = target.id === "sposob-polucheniya-2";
if (hide) document.querySelector("#payment-method-3").checked = true;
document.querySelectorAll("#payment-method-1, #payment-method-2").forEach(el => {
el.parentNode.classList.toggle("hide", hide)
})
}
});
</script>
</head>
<body>
<input type="radio" id="sposob-polucheniya-1" name="panes[webform_nid3005][0][___sposob_polucheniya]" value="sankt_piter" class="form-radio">
<input type="radio" id="sposob-polucheniya-2" name="panes[webform_nid3005][0][___sposob_polucheniya]" value="ozon" checked="checked" class="form-radio"> Оплата:
<label class="hide">1<input type="radio" id="payment-method-1" name="panes[payment][payment_method]" value="cod" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio"></label>
<label class="hide">2<input type="radio" id="payment-method-2" name="panes[payment][payment_method]" value="check" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio"></label>
<label>3<input type="radio" id="payment-method-3" name="panes[payment][payment_method]" value="check1" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio" checked="checked"></label>
<label>4<input type="radio" id="payment-method-4" name="panes[payment][payment_method]" value="other" onclick="get_payment_details(Drupal.settings.ucURL.checkoutPaymentDetails + this.value);" class="form-radio"></label>
</body>
</html>
|
рони, как всегда лучше всех! Спасибо!
|
| Часовой пояс GMT +3, время: 22:17. |