Checkboxes are not toggling

<div class="container">
    <ul class="list-unstyled">
        <li><a data-placement="bottom" data-toggle="popover" data-container="body" data-placement="left" type="button" data-html="true" href="#" id="login">TEST</a></li>
        <div id="popover-content" class="d-none">
            <div class="form-check">
                <input type="checkbox" class="form-check-input" id="checkbox100" checked="checked">
                <label class="form-check-label" for="checkbox100">Classic checkbox</label>
            </div>

            <div class="form-check">
                <input type="checkbox" class="filled-in form-check-input" id="checkbox101" checked="checked">
                <label class="form-check-label" for="checkbox101">Filled-in checkbox</label>
            </div>
        </div>
    </ul>
</div>

$(function () {

    $("[data-toggle=popover]").popover({
        html: true,
        content: function () {
            return $('#popover-content').html();
        }
    });
});