Wie erstelle ich eine Eingabegruppe mit Schaltflächen anstelle von Optionsfeldern, habe aber nur eine ausgewählt?

Question

Ich möchte das Verhalten von Radio-Tasten mit einem Bootstrap form-group emulieren, so dass eine Zeile in einem Formular mehrere Tasten ("btn btn-info" zum Beispiel), mit den Schaltflächen "ausgewählt", aber nur eine von ihnen kann ausgewählt werden bei ein bestimmter Moment.

Wenn ich nur zwei input Elemente einfügen, bekomme ich Schaltflächen, aber sie können nicht ausgewählt werden, nur gedrückt.

Beispiel (das für mich nicht funktioniert ...)

    <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

Die offizielle Seite suggeriert Verwenden Sie die von Bootstrap bereitgestellte button.js.

Werfen Sie einen Blick hier: getbootstrap.com/javascript/#buttons-checkbox-radio

Add Daten-Toggle = "Tasten" auf eine .btn-Gruppe Checkbox oder Radio enthalten Eingänge in ihren jeweiligen Arten zu ermöglichen, Makeln.

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

Die obige Snippet arbeitet mit einer Standard-Boot Installation.

Answer 2

Nun, wie @Wavemaster im Kommentar geantwortet: Die Antwort ist: getbootstrap.com/javascript/#buttons-checkbox-radio