Как через radio опцию установить disabled для элемента

Question

у меня есть два календаря и два checkbox, один для даты второй для периода как мне сделать чтобы при выборы период чтобы второй календарь был доступным (при открывании страницы он не доступен)

например вот это

в HTML сделал вот это а как быть с остальным помогите пожалуйста

<td colspan="20"><center>
<input type="radio" name="datesBlock" id="datesBlockDate" value="date" checked>
<label for="datesBlockDate" data-bind="localizedText: 'RegistryDatesBlockDate'">Дата</label>
<input type="radio" name="datesBlock" id="datesBlockPeriod" value="period">
<label for="datesBlockPeriod" data-bind="localizedText: 'RegistryDatesBlockPeriod'">Период</label><br>
<input id="date" type="date" style='width:130px' name="date" required value="<?php echo $date = date('Y-m-d'); ?>">
<input id="date" type="date" style='width:130px' name="date" required value="<?php echo $date = date('Y-m-d'); ?>">
</center></td>

Answer 1

optDate = document.querySelector('#datesBlockDate');
optPeriod = document.querySelector('#datesBlockPeriod');
datePeriod = document.querySelector('#datePeriod');
optDate.addEventListener('change', sel, false);
optPeriod.addEventListener('change', sel, false);

function sel(e) {
   datePeriod.disabled = e.target.value !== "period"
}

<td colspan="20"><center>
<input type="radio" name="datesBlock" id="datesBlockDate" value="date" checked>
<label for="datesBlockDate" data-bind="localizedText: 'RegistryDatesBlockDate'">Дата</label>
<input type="radio" name="datesBlock" id="datesBlockPeriod" value="period">
<label for="datesBlockPeriod" data-bind="localizedText: 'RegistryDatesBlockPeriod'">Период</label><br>
<input id="date" type="date" style='width:130px' name="date" required value="<?php echo $date = date('Y-m-d'); ?>">
<input id="datePeriod" disabled type="date" style='width:130px' name="date" required value="<?php echo $date = date('Y-m-d'); ?>">
</center></td>

или (селектор ниже просто для примера работы, его можно улучшить)

input:checked ~ label ~ input ~ label ~ input ~ #datePeriod {
  pointer-events:none;
  color: grey;
}

<td colspan="20"><center>
<input type="radio" name="datesBlock" id="datesBlockDate" value="date" checked>
<label for="datesBlockDate" data-bind="localizedText: 'RegistryDatesBlockDate'">Дата</label>
<input type="radio" name="datesBlock" id="datesBlockPeriod" value="period">
<label for="datesBlockPeriod" data-bind="localizedText: 'RegistryDatesBlockPeriod'">Период</label><br>
<input id="date" type="date" style='width:130px' name="date" required value="<?php echo $date = date('Y-m-d'); ?>">
<input id="datePeriod" type="date" style='width:130px' name="date" required value="<?php echo $date = date('Y-m-d'); ?>">
</center></td>

БЛОГ НА HUSL

Как через radio опцию установить disabled для элемента

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