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

3
votes

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.

3
javascripthtmlcssbuttontoggle
Why do you use two switches? – FZs
Maybe you need grouped radiobuttons? – Smollet777
I use the switches to toggle different contact forms – Marek Korbel

3 Answers

3
votes
<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>
3
votes

// 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.

2
votes

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.