Toggle switch - Disable one button when i enable the other one

Question

What i would like to do is to disable one button, when i enable the other one (so maximum of one button can be active), but my knowledge of JS is very basic. Any tips will be appreciated.

    /* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;

}

<div style="text-align: center; display: inline-block;">
<label class="switch">
  
<strong style=" position: absolute; color:white; margin-top: -30px; margin-left: -10px; text-align: center; font-weight: 100"> Text</strong>
  <input type="checkbox">
  <span class="slider round"></span>

</label>
</div>

<div style="display: inline-block;">
<div style="text-align: center;">
<label class="switch">
  
<strong style=" position: absolute; color:white; margin-top: -30px; margin-left: -10px; text-align: center; font-weight: 100"> Text</strong>
  <input type="checkbox">
  <span class="slider round"></span>

</label>
</div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum interdum vehicula tristique. Vestibulum et est sem. Ut venenatis sagittis gravida. Nam enim tortor, lacinia pretium dolor sit amet, rutrum ultricies ligula. Nunc lacinia metus in sagittis accumsan. Fusce eu urna mi. Sed mollis, erat eget blandit fringilla, nisi justo congue leo, eu fringilla orci tellus non diam. Curabitur id interdum nisi. Sed vulputate consectetur odio et laoreet. Vestibulum nec lorem massa. Morbi massa tortor, maximus vel purus ac, aliquet vulputate tellus.

Answer 1

// get all inputs and hang event handlers
document.querySelectorAll('input[type=checkbox]').forEach(element => element.addEventListener('click', disableOther))


function disableOther(event) {
  //"event" is current event(click)
  //"event.target" is our clicked element
  if (event.target.checked) {

    // if current input is checked -> disable ALL inputs
    document.querySelectorAll('input[type=checkbox]').forEach(element => element.disabled = true)
    // enabling our current input
    event.target.disabled = false;

  } else {

    // if current input is NOT checked -> enabling ALL inputs
    document.querySelectorAll('input[type=checkbox]').forEach(element => element.disabled = false)

  }
}

/* The switch - the box around the slider */

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}


/* Hide default HTML checkbox */

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

<div style="text-align: center; display: inline-block;">
  <label class="switch">
  
<strong style=" position: absolute; color:white; margin-top: -30px; margin-left: -10px; text-align: center; font-weight: 100"> Text</strong>
  <input type="checkbox">
  <span class="slider round"></span>

</label>
</div>

<div style="display: inline-block;">
  <div style="text-align: center;">
    <label class="switch">
  
<strong style=" position: absolute; color:white; margin-top: -30px; margin-left: -10px; text-align: center; font-weight: 100"> Text</strong>
  <input type="checkbox">
  <span class="slider round"></span>

</label>
  </div>

If something isn't clear - feel free to ask.