<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);

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.