How to creat an input group with buttons instead of radio buttons but still have only one of them selected?

Question

I wish to emulate the behaviour of radio buttons withing a bootstrap form-group so a line in a form has several buttons ( "btn btn-info" for example), with the buttons being able to be "selected", but only one of them can be selected at a given moment.

If I just insert two input elements I get buttons, but they cannot be selected, just pressed.

Example (that does not work for me...)

                    <div class="form-group row">
                        <div class="col-sm-2">
                            <label for="Section" style="text-align:right">Section</label>
                        </div>
                        <div class="col-sm-10">
                            <label align=center>
                                <input class="btn btn-info" name="Section" id="Non-Smoking" value="Non-Smoking">
                            </label>
                            <label>
                                <input class="btn btn-warning" name="Section" id="Smoking" value="Smoking">
                            </label> 
                        </div>
                    </div>

Answer 1

The official site suggest to use the button.js provided by bootstrap.

Take a look here: getbootstrap.com/javascript/#buttons-checkbox-radio

Add data-toggle="buttons" to a .btn-group containing checkbox or radio inputs to enable toggling in their respective styles.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" name="options" id="option1" autocomplete="off" checked>Radio 1 (preselected) </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option2" autocomplete="off">Radio 2 </label> <label class="btn btn-primary"> <input type="radio" name="options" id="option3" autocomplete="off">Radio 3 </label> </div> 

The above snippet works with a standard bootstrap installation.

Answer 2

好吧，正如@Wavemaster在评论中回答：答案位于： getbootstrap.com/javascript/#buttons-checkbox-radio