Selecting only one button from button-group

Question

I want to create a button group, where button from a group can be selected at once.

Let's suppose we have got three buttons, the user should be able to select only one button, so if user selects "Apple" then they shouldn't be able to select the Apple button again.

The main purpose will be to stop user selecting the button which is already selected.

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

How can I solve this?

Answer 1

This seems to be exactly what are you searching for.

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

You can read more about this under this link. This is how it looks like:

Answer 2

You should use radiobuttons in this way.

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>