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.

Answer 2

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<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" class="checkBox" onclick="ch($(this));"> 
<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" class="checkBox" onclick="ch($(this));">
<span class="slider round"></span>

</label>
</div>
<script>
function ch(thi){
    $('.checkBox').prop('checked',false);
    thi.prop('checked',true);   }
</script>
</body>

Answer 3

This script checks whether any other switch is checked (add to the end of your HTML file, just before the </body> :

<script>
const switches = document.querySelectorAll("input[type=checkbox]");
for(const s of switches) s.addEventListener("change", check);

function check(e) {
  //count the number of checked switches:
  let n = 0;
  for(const s of switches) {
    if(s.checked) n++;
  }
  // if there is more than one checked (including the one you just clicked), uncheck it:
  if(n > 1) e.target.checked = false;
}
</script>

This works for any number of switches, only one can be switched.