Как связать checkbox и select

149

04 мая 2021, 21:50

Есть элемент select, рядом с ним стоит чекбокс (<input type='checkbox'>) select по умолчанию находится в состоянии disabled, мне надо что бы при нажатии на чекбокс состояние select менялось на нормальное (т.е атрибут disabled прекращал свою работу, если можно так сказать) Возможно ли это сделать без применения JavaScript? Заранее спасибо!

Answer 1

можно так исхитриться, добавить стили, присущие типу disabled в CSS и всё.

.form-group { 
  display: flex; 
  align-items: center; 
} 
 
input[type="checkbox"] { 
  order: 2; 
} 
 
input[type="checkbox"]:checked+select { 
  pointer-events: all; 
} 
 
input[type="checkbox"]:not(:checked)+select { 
  pointer-events: none; 
}

<form action="#"> 
  <div class="form-group"> 
    <input type="checkbox"> 
 
    <select tabindex="-1"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
    </select> 
  </div> 
</form>