<div class="container">
<div class="checkbox-block">
<label>
<input id="incall" type="checkbox" class="form-check-input">
Incall</label>
</div>
<div class="m-3">
<input id="incall-select-30" type="text" placeholder="30 min incall">
</div>
<div class="m-3">
<input id="incall-select-60" type="text" placeholder="1 hour incall">
</div>
<div class="m-3">
<input id="incall-select-120" type="text" placeholder="2 hour incall">
</div>
<div class="m-3">
<input id="incall-select-180" type="text" placeholder="3 hour incall">
</div>
</div>
const incallInputs = document
.querySelectorAll('#incall-select-30, #incall-select-60, #incall-select-120, #incall-select-180 ');
const onIncall = ({ target }) => {
incallInputs.forEach(el => {
if (target.checked) {
el.setAttribute('disabled', true);
el.value = 0;
} else {
el.removeAttribute('disabled');
el.value = '';
}
});
};
document.getElementById('incall').addEventListener('input', onIncall);
This Pen doesn't use any external JavaScript resources.