input radio зависимости

283

04 ноября 2017, 13:27

введите сюда кодЕсть 2 блока с различными input radio блоками. В каждом по 3 варианта выбора. Как сделать так, чтобы при выборе в первом блоке радиокнопок, скажем, первого варианта, во втором блоке сразу же пропадал 1 вариант выбора, и оставалось только 2?

<form> 
        <h2>Выберите форму каркаса</h2> 
        <div class="types"> 
          <div class="block"> 
            <div class="x1"><input id="tab1" type="radio" name="tabs" value="1" checked><label for="tab1"></label><p>Классическая</p></div> 
            <div class="x2"><img src="img/f1.png" alt="Штакет"></div> 
          </div> 
          <div class="block"> 
            <div class="x1"><input id="tab2" type="radio" name="tabs" value="2"><label for="tab2"></label><p>С прямыми стенками</p></div> 
            <div class="x2"><img src="img/f2.png" alt="Шахматка"></div> 
          </div> 
          <div class="block"> 
            <div class="x1"><input id="tab3" type="radio" name="tabs" value="3"><label for="tab3"></label><p>По митлайдеру</p></div> 
            <div class="x2"><img src="img/f3.png" alt="Ранчо"></div> 
          </div> 
        </div> 
        <h2>Выберите размер теплицы</h2> 
        <div class="widthx"> 
          <p>Ширина</p> 
          <div class="block"> 
            <div class="x1"><input id="tab12" type="radio" name="tabs2" value="1" checked><label for="tab12"></label></div> 
            <div class="x2"><p>2.5м</p></div> 
          </div> 
          <div class="block"> 
            <div class="x1"><input id="tab22" type="radio" name="tabs2" value="2"><label for="tab22"></label></div> 
            <div class="x2"><p>3м</p></div> 
          </div> 
          <div class="block"> 
            <div class="x1"><input id="tab32" type="radio" name="tabs2" value="3"><label for="tab32"></label></div> 
            <div class="x2"><p>4м</p></div> 
          </div> 
        </div> 
        <div class="lengthx"> 
          <p>Длина</p> 
          <div class="block"> 
            <div class="x1"><input id="tab13" type="radio" name="tabs3" value="1" checked><label for="tab13"></label></div> 
            <div class="x2"><p>4м</p></div> 
          </div> 
          <div class="block"> 
            <div class="x1"><input id="tab23" type="radio" name="tabs3" value="2"><label for="tab23"></label></div> 
            <div class="x2"><p>6м</p></div> 
          </div> 
          <div class="block"> 
            <div class="x1"><input id="tab33" type="radio" name="tabs3" value="3"><label for="tab33"></label></div> 
            <div class="x2"><p>8м</p></div> 
          </div> 
          <div class="block"> 
            <div class="x1"><input id="tab43" type="radio" name="tabs3" value="4"><label for="tab43"></label></div> 
            <div class="x2"><p>10м</p></div> 
          </div> 
        </div> 
        <div class="stepx"> 
          <p>Шаг Дуг</p> 
          <div class="block"> 
            <div class="x1"><input id="tab14" type="radio" name="tabs4" value="1" checked><label for="tab14"></label></div> 
            <div class="x2"><p>1м</p></div> 
          </div> 
          <div class="block"> 
            <div class="x1"><input id="tab24" type="radio" name="tabs4" value="2"><label for="tab24"></label></div> 
            <div class="x2"><p>0.65м</p></div> 
          </div> 
        </div> 
        <button id="gocalc" type="submit">Рассчитать</button> 
      </form>

Answer 1

В том виде что в коде - только скрипты. Можно чистым css, но тогда все input'ы должны быть "детьми" одного "родителя". Для примера:

#background_color_red:checked ~ #font_color_red, 
#background_color_red:checked ~ #font_color_red + label { 
  pointer-events: none; 
  color: gray; 
} 
#background_color_green:checked ~ #font_color_green, 
#background_color_green:checked ~ #font_color_green + label { 
  pointer-events: none; 
  color: gray; 
} 
#background_color_blue:checked ~ #font_color_blue, 
#background_color_blue:checked ~ #font_color_blue + label { 
  pointer-events: none; 
  color: gray; 
}

<h3>Background color</h3> 
<input type=radio name=background_color id=background_color_red /> 
<label for=background_color_red>Red</label> 
<input type=radio name=background_color id=background_color_green /> 
<label for=background_color_green>Green</label> 
<input type=radio name=background_color id=background_color_blue /> 
<label for=background_color_blue>Blue</label> 
 
<h3>Font color</h3> 
<input type=radio name=font_color id=font_color_red /> 
<label for=font_color_red>Red</label> 
<input type=radio name=font_color id=font_color_green /> 
<label for=font_color_green>Green</label> 
<input type=radio name=font_color id=font_color_blue /> 
<label for=font_color_blue>Blue</label>

p.s. И да, если опция уже выбрана и должна быть заблокирована, то таким образом с неё выбор не снимется.

p.p.s. Можно вместо имитации disable скрывать опцию c display: none;