Форум

Oleg0 · #1 (**permalink**) 30.10.2021, 14:55

Добрый день!
Помогите, пожалуйста, решить проблему.
Есть 2 формы с радио-кнопками.
Выбор способов доставки:

По СПб (#sposob-polucheniya-1)
По России (#sposob-polucheniya-2)

И выбор способов оплаты:

Наличными (#payment-method-1)
Картой курьеру (#payment-method-2)
Картой онлайн (#payment-method-3)
Через банк (#payment-method-4)

По умолчанию выбран первый 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>

Как то это можно решить?

рони · #2 (**permalink**) 30.10.2021, 17:07

Oleg0,
рисуйте html -- минимум и желательно без id, классы только

Oleg0 · #3 (**permalink**) 30.10.2021, 18:08

Сообщение от рони

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">

рони · #4 (**permalink**) 30.10.2021, 18:43

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>

рони · #5 (**permalink**) 30.10.2021, 19:16

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>

Oleg0 · #6 (**permalink**) 30.10.2021, 20:32

рони, как всегда лучше всех! Спасибо!

Форум

Справочник

Discord чат

Курсы javascript