javascript - Toggle switch - Disable one button when i enable the other one - Stack Overflow

admin管理员组

文章数量:1287868

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>

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.

• javascript
• html
• css
• button
• toggle

Share Improve this question Follow asked Dec 1, 2018 at 15:47 Marek KorbelMarek Korbel 7911 gold badge11 silver badge77 bronze badges 3

• Why do you use two switches? – FZs Commented Dec 1, 2018 at 16:01
• Maybe you need grouped radiobuttons? – Smollet777 Commented Dec 1, 2018 at 16:21
• I use the switches to toggle different contact forms – Marek Korbel Commented Dec 1, 2018 at 16:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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

<head>
<script src="https://ajax.googleapis./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>

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.

本文标签： javascriptToggle switchDisable one button when i enable the other oneStack Overflow