Как ограничить переключение радио-кнопок 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:48. |