Выключать определенные блоки когда выбран нужный radio input

Question

На сайте есть выбор способа доставки, который реализован через input.

У активного способа есть class="checkedactive".

Так же есть поля ввода город, адрес, нужно что бы при выборе первого способа доставки поле адрес пропадало.

Проблема в том, что поля в разных блоках:

<form class="form-horizontal" id="payment_address_form" name="payment_address_form" novalidate="novalidate">
    <div class="text-input form-group sort-item required" data-sort="16" id="payment_address_city_input">
        <div class="col-xs-5">
            <label class="control-label" for="payment_address_city"><span class="text" title="">Город:</span></label>
        </div>
        <div class="col-xs-7">
            <input class="form-control required city" data-msg-maxlength="Название города должно быть от 2 до 128 символов!" data-msg-minlength="Название города должно быть от 2 до 128 символов!" data-rule-maxlength="128" data-rule-minlength="3" id="payment_address_city" name="payment_address.city" placeholder="* Город" type="text" value="">
        </div>
    </div>
    <div class="text-input form-group sort-item" data-sort="17" id="payment_address_address_1_input">
        <div class="col-xs-5">
            <label class="control-label" for="payment_address_address_1"><span class="text" title="">Адрес:</span></label>
        </div>
        <div class="col-xs-7">
            <input class="form-control not-required address_1" data-msg-maxlength="Адрес должен быть от 3 до 128 символов!" data-msg-minlength="Адрес должен быть от 3 до 128 символов!" data-rule-maxlength="128" data-rule-minlength="3" id="payment_address_address_1" name="payment_address.address_1" placeholder=" Адрес" type="text" value="">
        </div>
    </div>
</form>
<div id="shipping_method_list">
    <strong class="title">Самовывоз</strong>
    <div class="radio-input radio">
        <label for="pickup.pickup"><input checked="checked" class="styled checkedactive" data-refresh="5" id="pickup.pickup" name="shipping_method" type="radio" value="pickup.pickup"> <span class="text">Самовывоз из магазина</span><span class="price">0 pуб.</span></label>
    </div><strong class="title">Доставка в зависимости от расстояния</strong>
    <div class="radio-input radio">
        <label for="mileage.oblast"><input class="styled" data-refresh="5" id="mileage.oblast" name="shipping_method" type="radio" value="mileage.oblast"> <span class="text"><em class="error" style="display: inline;">Для рассчета стоимости доставки укажите населенный пункт и адрес доставки.</em></span><span class="price"></span></label>
    </div><strong class="title">Доставка в приделах МКАД</strong>
    <div class="radio-input radio">
        <label for="flat.flat"><input class="styled" data-refresh="5" id="flat.flat" name="shipping_method" type="radio" value="flat.flat"> <span class="text">До 15 000 руб</span><span class="price">300 pуб.</span></label>
    </div>
</div>

Answer 1

Это можно сделать прослушивая событие click по интересующим нас элементам и в зависимости от того что выбрал пользователь (или то что выбрано по умолчанию) скрывать либо показывать необходимые блоки:

const address = document.querySelector("#payment_address_address_1_input")
const pickup = document.querySelector("#pickup\\.pickup")
if (pickup.checked) {
  address.classList.add("hide")
}

const handleClick = event => {
  if (event.target.id === "pickup.pickup" && event.target.checked) {
    address.classList.add("hide")
  } else {
    address.classList.remove("hide")
  }
}

document.querySelectorAll("[type=radio]").forEach(item =>
item.addEventListener("click", handleClick))

.hide {
  display: none;
}

<form class="form-horizontal" id="payment_address_form" name="payment_address_form" novalidate="novalidate">
  <div class="text-input form-group sort-item required" data-sort="16" id="payment_address_city_input">
    <div class="col-xs-5">
      <label class="control-label" for="payment_address_city"><span class="text" title="">Город:</span></label>
    </div>
    <div class="col-xs-7">
      <input class="form-control required city" data-msg-maxlength="Название города должно быть от 2 до 128 символов!" data-msg-minlength="Название города должно быть от 2 до 128 символов!" data-rule-maxlength="128" data-rule-minlength="3" id="payment_address_city"
        name="payment_address.city" placeholder="* Город" type="text" value="">
    </div>
  </div>
  <div class="text-input form-group sort-item" data-sort="17" id="payment_address_address_1_input">
    <div class="col-xs-5">
      <label class="control-label" for="payment_address_address_1"><span class="text" title="">Адрес:</span></label>
    </div>
    <div class="col-xs-7">
      <input class="form-control not-required address_1" data-msg-maxlength="Адрес должен быть от 3 до 128 символов!" data-msg-minlength="Адрес должен быть от 3 до 128 символов!" data-rule-maxlength="128" data-rule-minlength="3" id="payment_address_address_1"
        name="payment_address.address_1" placeholder=" Адрес" type="text" value="">
    </div>
  </div>
</form>
<div id="shipping_method_list">
  <strong class="title">Самовывоз</strong>
  <div class="radio-input radio">
    <label for="pickup.pickup"><input checked="checked" class="styled checkedactive" data-refresh="5" id="pickup.pickup" name="shipping_method" type="radio" value="pickup.pickup"> <span class="text">Самовывоз из магазина</span><span class="price">0 pуб.</span></label>
  </div><strong class="title">Доставка в зависимости от расстояния</strong>
  <div class="radio-input radio">
    <label for="mileage.oblast"><input class="styled" data-refresh="5" id="mileage.oblast" name="shipping_method" type="radio" value="mileage.oblast"> <span class="text"><em class="error" style="display: inline;">Для рассчета стоимости доставки укажите населенный пункт и адрес доставки.</em></span><span class="price"></span></label>
  </div><strong class="title">Доставка в приделах МКАД</strong>
  <div class="radio-input radio">
    <label for="flat.flat"><input class="styled" data-refresh="5" id="flat.flat" name="shipping_method" type="radio" value="flat.flat"> <span class="text">До 15 000 руб</span><span class="price">300 pуб.</span></label>
  </div>
</div>

БЛОГ НА HUSL

Выключать определенные блоки когда выбран нужный radio input

Ответы (1 шт):