Bootstrap，如果在页面加载时选中复选框，则单击时不会取消选中复选框

Question

When page load, a checked box does not uncheck if clicked. I have to click it twice so that it can uncheck. How to solve this problem?

My reference code can be found here in codepen .

HTML

<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <div class="button-group">
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
                <ul class="dropdown-menu">
                    <li><a href="#" class="small" data-value="option1" tabIndex="-1"><input type="checkbox" checked />&nbsp;Option 1</a></li>
                    <li><a href="#" class="small" data-value="option2" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 2</a></li>
                    <li><a href="#" class="small" data-value="option3" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 3</a></li>
                    <li><a href="#" class="small" data-value="option4" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 4</a></li>
                    <li><a href="#" class="small" data-value="option5" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 5</a></li>
                    <li><a href="#" class="small" data-value="option6" tabIndex="-1"><input type="checkbox"/>&nbsp;Option 6</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>

JS

var options = [];

$('.dropdown-menu a').on('click', function (event) {

    var $target = $(event.currentTarget),
        val = $target.attr('data-value'),
        $inp = $target.find('input'),
        idx;

    if ((idx = options.indexOf(val)) > -1) {
        options.splice(idx, 1);
        setTimeout(function () {
            $inp.prop('checked', false)
        }, 0);
    } else {
        options.push(val);
        setTimeout(function () {
            $inp.prop('checked', true)
        }, 0);
    }

    $(event.target).blur();

    console.log(options);
    return false;
});

Answer 1

When you are giving checked for option1 , you are not adding it into the options array. The options array is empty at the beginning causing the double clicking issue.

If you are going to use checked then add "option1" to the options array and it will work fine.