Bootstrap-4 toggle-button

Baue ich ein einfaches Fahrzeug-Inspektion form, und ich möchte Kontrollkästchen verwenden, wie die Tasten zu erfassen true/false Werte.

Dies ist eigentlich trivial sein mit Bootstrap 4.

Ich würde aber gerne einstellen das Standard-Verhalten des buttons; zum Umschalten zwischen den success und danger Klassen zu bezeichnen true/false. Und auch in einigen Fällen, um den text der Taste, wie zB. "Leaks" -> "Keine Lecks".

1. Habe ich die toggle-arbeiten mit der Hilfe von @Yass, aber ich bin nicht immer die richtige true/false Werte, wenn ich das Formular abschicken. Auch wenn die Kontrollkästchen aktiviert sind (true), die Werte kommen durch, als ob Sie false.

2. Ich bin mir nicht sicher, wie Sie Sie zu behandeln, die änderung im text, wenn der Wechsel zwischen den beiden Staaten.

Kontrollkästchen Schaltflächen

HTML

<div class="row">
    <div class="col-sm-4 col-xs-12">
        <p class="font-weight-bold">Bonnet</p>
        <div data-toggle="buttons">
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="oil" checked="checked" autocomplete="off"> Oil
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="coolant" checked="checked" autocomplete="off"> Coolant
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="breakfluid" checked="checked" autocomplete="off"> Break Fluid
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="screenwash" checked="checked" autocomplete="off"> Screen Wash
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="noleaks" checked="checked" autocomplete="off"> No Leaks
            </label>
        </div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <p class="font-weight-bold">Outside</p>
        <div data-toggle="buttons">
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="tyres" checked="checked" autocomplete="off">
                Tyres
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="wiperblades" checked="checked" autocomplete="off">
                Wiper Blades
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="lights" checked="checked" autocomplete="off">
                Lights
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="indicators" checked="checked" autocomplete="off">
                Indicators
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="outcleanliness" checked="checked" autocomplete="off">
                Cleanliness
            </label>
        </div>
    </div>
    <div class="col-sm-4 col-xs-12">
        <p class="font-weight-bold">Inside</p>
        <div data-toggle="buttons">
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="horn" checked="checked" autocomplete="off">
                Horn
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="breaks" checked="checked" autocomplete="off">
                Breaks/Handbrake
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="seatbelt" checked="checked" autocomplete="off">
                Seatbelt
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="windscreen" checked="checked" autocomplete="off">
                Windscreen
            </label>
            <label class="btn btn-block btn-success">
                <input type="checkbox" name="incleanliness" checked="checked" autocomplete="off">
                Cleanliness
            </label>
        </div>
    </div>
</div>

JavaScript

$('label.btn').on('click', function() {
    //Find the child check box.
    var $input = $(this).find('input');

    $(this).toggleClass('btn-danger btn-success');
    //Remove the attribute if the button is "disabled"
    if ($(this).hasClass('btn-danger')) {
        $input.removeAttr('checked');
    } else {
        $input.attr('checked', '');
    }

    return false; //Click event is triggered twice and this prevents re-toggling of classes
});

https://jsfiddle.net/mstnorris/9fyzfu8w/

InformationsquelleAutor Mike | 2016-04-02