it-swarm.com.de

Twitter-Bootstrap-Button Gruppensteuerungs-Optionsfelder/Kontrollkästchen

Ich versuche, die Twitter-Bootstrap-Schaltflächengruppe als tatsächlichen Steuerelement für Formulareingaben zu verwenden. Standardmäßig können diese Schaltflächengruppen als Optionsschaltflächen oder Kontrollkästchengruppen fungieren. Da sie jedoch das <button>-Element verwenden, können sie nicht tatsächlich als Optionsschaltflächen oder Kontrollkästchen verwendet werden.

In meiner Recherche habe ich diese Seite gefunden, die CSS verwendet, um diese Bootstrap-Schaltflächen dazu zu bringen, Optionsfelder und Kontrollkästchen zu steuern. Das einzige Problem ist, dass sie eher neuere CSS-Funktionen verwenden, um zu funktionieren, und daher IE9 oder höher erforderlich ist.

Ich möchte den Support auf IE8 ausdehnen. Gibt es eine andere (möglicherweise von JS kontrollierte) Lösung, die dieselben Funktionen wie der obige Link ohne die steilen CSS-Anforderungen bietet?

Vielen Dank für Ihre Zeit.

47
Oliver Spryn

Bootstrap 3 hat eine "native" Lösung ...

Es gibt jetzt eine "echte" Bootstrap-Lösung für dieses Problem, die auch bei älteren Browsern gut funktioniert. So sieht es aus:

// get selection
$('.colors input[type=radio]').on('change', function() {
    console.log(this.value);
});
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="btn-group colors" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
  </label>
</div>

<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Weitere Informationen finden Sie in der entsprechenden Bootstrap-Dokumentation .

Bootstrap 4

Bootstrap 4 unterstützt Komponenten auf dieselbe Weise wie Bootstrap 3 , Bootstrap 4 unterstützt jedoch nicht IE9 . Vielleicht möchten Sie das Bootstrap IE8 - Projekt ausprobieren.

132
maciek

Bootstrap 2

Versuchen Sie diese Geige

HTML:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary">Right</button>
</div>
<input type="hidden" id="buttonvalue"/>

Skript:

$(".btn-group button").click(function () {
    $("#buttonvalue").val($(this).text());
});

dann buttonvalue serverseite

23
Eonasdan

Mit Bootstrap 3.2 setzen Sie die verborgene Eingabe in die Mitte Ihres Schaltflächengruppencontainers. Anstelle des Textinhalts nehmen wir den Wert des Datenwertfeldes.

<div id="test" class="btn-group checkit" data-toggle="buttons-radio">
    <button type="button" data-value="1" class="btn btn-default active">Yes</button>
    <input type='hidden' name="testfield" value='1'>
    <button type="button" data-value="0" class="btn btn-default ">No</button>
</div>

Fügen Sie nun ein kleines Javascript-Snippet in den Onload-Teil Ihrer Vorlage ein.

$('.checkit .btn').click(function() {
    $(this).parent().find('input').val($(this).data("value"));
});

Sie müssen also nur noch .checkit zu Ihrer Schaltflächengruppe hinzufügen und ein ausgeblendetes Eingabefeld einfügen.

Mit Bootstrap 3.2 können Sie Tastengruppen direkt mit Radio- oder Checkbox-Eingängen verwenden

<div class="btn-group" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="options" id="option1" value="1" /> Yes
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option2" value="0" /> No
    </label>
    <label class="btn btn-default">
        <input type="radio" name="options" id="option3" value="42" /> Whatever
    </label>
</div>

Siehe hier: http://jsfiddle.net/DHoeschen/gmxr45hh/1/

4
RubbelDeCatc

Sie können ausgeblendete Formularelemente und Javascript verwenden, um den Schaltflächenstatus zum Auslösen der Formularelementzustände zu verwenden.

0
BahamutWC

Nur-CSS-Lösung:

HTML:

<div class="btn-group">
    <label class="btn btn-primary"><input type="checkbox"><span>Button 1</span></label>
    <label class="btn btn-primary"><input type="checkbox"><span>Button 2</span></label>
</div>

SCSS/WENIGER:

 label.btn {
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;

    span {
      display: block;
      padding: 10px 15px;
    }

    input[type=checkbox] {
      display: none;
    }

    input:checked + span {
      display: block;
      color: #fff;
      background-color: #285e8e;
    }
  }

JSfiddle hier

0
oboshto