Bootstrap 4 toggle button
<p>I am building a simple vehicle inspection form and I would like to use checkboxes as buttons to capture <code>true</code>/<code>false</code> values.</p>

<p>This is supposed to be trivial using <a href="http://v4-alpha.getbootstrap.com/components/buttons/#checkbox-and-radio-buttons" rel="nofollow noreferrer">Bootstrap 4</a>.</p>

<p>I would however like to adjust the default behaviour of the buttons; <strong>to toggle between the <code>success</code> and <code>danger</code> classes to denote <code>true</code>/<code>false</code>.</strong> And also in some cases to change the text of the button, eg. "Leaks" -> "No Leaks".</p>

<ol>
<li><p>I have got the toggle working with the help of @Yass but I am not getting the correct <code>true</code>/<code>false</code> values when I submit the form. Even though the checkboxes are checked (<code>true</code>), the values are coming through as if they are <code>false</code>.</p></li>
<li><p>I'm not sure how to handle the change in text when toggling between the two states.</p></li>
</ol>

<p><strong>Checkbox Buttons</strong></p>

<p><img src="https://i.imgur.com/gGpj6Fz.png" alt="Checkbox Buttons"></p>

<p><strong>HTML</strong></p>

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

<p><strong>JavaScript</strong></p>

<pre><code>$('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
});
</code></pre>

<p><a href="https://jsfiddle.net/mstnorris/9fyzfu8w/" rel="nofollow noreferrer">https://jsfiddle.net/mstnorris/9fyzfu8w/</a></p>