从按钮组中仅选择一个按钮

Question

我想创建一个按钮组,可以一次选择组中的按钮.

假设我们有三个按钮,用户应该只能选择一个按钮,所以如果用户选择"Apple",那么他们就不能再选择Apple按钮了.

主要目的是阻止用户选择已经选择的按钮.

<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <button type="button" class="btn btn-primary">Sony</button>
</div>

我怎么解决这个问题？

Answer 1

这似乎正是你在寻找什么.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" checked> Apple
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Samsung
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Sony
  </label>
</div>

您可以在此链接下阅读更多相关信息.这是它的样子:

Answer 2

您应该以这种方式使用单选按钮。

body {
	font-family: sans-serif;
	font-weight: normal;
	margin: 10px;
	color: #999;
	background-color: #eee;
}

form {
	margin: 40px 0;
}

div {
	clear: both;
	margin: 0 50px;
}

label {
  width: 200px;
  border-radius: 3px;
  border: 1px solid #D1D3D4
}

input.radio:empty {
	margin-left: -999px;
}

input.radio:empty ~ label {
	position: relative;
	float: left;
	line-height: 2.5em;
	text-indent: 3.25em;
	margin-top: 2em;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

input.radio:empty ~ label:before {
	position: absolute;
	display: block;
	top: 0;
	bottom: 0;
	left: 0;
	content: '';
	width: 2.5em;
	background: #D1D3D4;
	border-radius: 3px 0 0 3px;
}

input.radio:hover:not(:checked) ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #C2C2C2;
}

input.radio:hover:not(:checked) ~ label {
	color: #888;
}

input.radio:checked ~ label:before {
	content:'\2714';
	text-indent: .9em;
	color: #9CE2AE;
	background-color: #4DCB6D;
}

input.radio:checked ~ label {
	color: #777;
}

input.radio:focus ~ label:before {
	box-shadow: 0 0 0 3px #999;
}

<div>
<input type="radio" name="radio" id="radio1" class="radio" checked/>
<label for="radio1">Apple</label>
</div>

<div>
<input type="radio" name="radio" id="radio2" class="radio"/>
<label for="radio2">Samsung</label>
</div>

<div>	
<input type="radio" name="radio" id="radio3" class="radio"/>
<label for="radio3">Sony</label>
</div>