如何只启用一个开关按钮

I have three switch buttons in my form and I want that user can switch on one button and others became automatically off. I do not want to use typical radio button in my form. I get switch button from : http://www.w3schools.com/howto/howto_css_switch.asp

我的表单中有三个开关按钮，我希望用户可以打开一个按钮，而其他按钮自动关闭。我不希望在我的表单中使用典型的单选按钮。我从http://www.w3schools.com/howto/howto_css_switch.asp获得开关按钮。

my html is :

我的html是:

<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

and my css is :

我的css是:

<style type="text/css">
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* 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%;
}
</style>

Also I want to switch on "Buy" default button

我还想打开“购买”默认按钮

3 个解决方案

#1

Use radio instead of checkbox and add "checked" for default option

使用单选而不是复选框，并为默认选项添加“勾选”

<!-- Rectangular switch -->
<label class="switch">
  <input type="radio" name="switch" checked>
  <div class="slider"></div>
</label>

<!-- Rounded switch -->
<label class="switch">
  <input type="radio" name="switch">
  <div class="slider round"></div>
</label>

https://jsfiddle.net/tu25Lr8t/

#2

You can try the following change event

您可以尝试以下更改事件

$(':checkbox').change(function() {
  $(this).find(':checkbox').prop('checked', !this.checked); //toggle the state of the current checkbox
  $(':checkbox').not(this).prop('checked', false); // uncheck  all checkboxes except the current one 
});

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

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}
/* Hide default HTML checkbox */

.switch input {
  display: none;
}
/* 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%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Rectangular switch -->
<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

<!-- Rounded switch -->
<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>
<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

#3

This way you can disabled other checkboxes, change accordingly in your code.

通过这种方式，您可以禁用其他复选框，在您的代码中相应地更改。

You just get the current clicked checkbox and then disable all other checkboxes by using .not() function

您只需获取当前单击的复选框，然后使用.not()函数禁用所有其他复选框。

$(document).ready(function(){
  $(":checkbox").change(function(){
    if($(this).is(":checked")){
      $(":checkbox").not($(this)).attr("disabled","disabled");
      //$(":checkbox").not($(this)).prop("disabled",true);
    }
    else{
      $(":checkbox").not($(this)).removeAttr("disabled");
      //$(":checkbox").not($(this)).prop("disabled",false);
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" /> Button 1
<input type="checkbox" /> Button 2
<input type="checkbox" /> Button 3

#1