Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 30.10.2021, 14:55
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

Как ограничить переключение радио-кнопок 2-мя и включить первую из них?
Добрый день!
Помогите, пожалуйста, решить проблему.
Есть 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Oleg0,
рисуйте html -- минимум и желательно без id, классы только
Ответить с цитированием
  #3 (permalink)  
Старый 30.10.2021, 18:08
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

Сообщение от рони Посмотреть сообщение
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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>

Последний раз редактировалось рони, 30.10.2021 в 18:46.
Ответить с цитированием
  #5 (permalink)  
Старый 30.10.2021, 19:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

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>
Ответить с цитированием
  #6 (permalink)  
Старый 30.10.2021, 20:32
Интересующийся
Отправить личное сообщение для Oleg0 Посмотреть профиль Найти все сообщения от Oleg0
 
Регистрация: 07.04.2016
Сообщений: 28

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как ограничить страницы и контент в них. Чтобы на других страницах не было видно Alexander3928 Общие вопросы Javascript 19 22.05.2021 21:38
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как включить синхронное выполнение строк? SkaN Элементы интерфейса 1 26.04.2012 22:28