Bootstrap 4 toggle button

Question

I am building a simple vehicle inspection form and I would like to use checkboxes as buttons to capture true/false values.

This is supposed to be trivial using Bootstrap 4.

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

1. I have got the toggle working with the help of @Yass but I am not getting the correct true/false values when I submit the form. Even though the checkboxes are checked (true), the values are coming through as if they are false.

2. I'm not sure how to handle the change in text when toggling between the two states.

Checkbox Buttons

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/

Answer 1

Here is an alternative solution with pure Javascript. Add a hidden input associated to each button, and update hidden values each time the button is clicked.

HTML :

<!-- Visible button -->
<input onclick="toogleButton(this,'hiddenButton')" class="btn btn-secondary" type="button" value="Toogle">
<!-- Hidden input -->
<input name="FM_city" id="hiddenButton" type="hidden" value="0"></input>

Javascript :

// Called when the button is clicked
function toogleButton(callingElement,hiddenElement)
{
    // Check the color of the button
    if (callingElement.classList.contains('btn-secondary'))
    {
        // If the button is 'unset'; change color and update hidden element to 1
        callingElement.classList.remove('btn-secondary');
        callingElement.classList.add('btn-success');
        document.getElementById(hiddenElement).value="1";
    }
    else 
    {
        // If the button is 'set'; change color and update hidden element to 0
        callingElement.classList.remove('btn-success');
        callingElement.classList.add('btn-secondary');
        document.getElementById(hiddenElement).value="0";
    }
}

When the form is submitted, process value of the hidden input. Note that you can easily change the text of the button with : callingElement.value="New text here" Last remark : initial value of hidden elements must be in accordance with the initial color of the associated button.

Answer 2

Handle the click event of the buttons, and toggle the checked value of the input using jQuery .prop() like this..

var $chk = $(this).find('[type=checkbox]');
$chk.prop('checked',!$chk.prop('checked'));

Demo: http://codeply.com/go/IeuO1fPf7H