需要双击复选框来勾选

Question

我有问题，我的代码不接受一个派系。必须单击两次才能打勾。 如果单击复选框一次，则不会出现勾号，但是如果单击“保存”按钮，则重新加载页面后，该复选框就会出现勾号。

JS

<script type="text/javascript">
var options = [];

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

    // This was your original function which sets the checkbox as checked or unchecked, and draws the check mark
    var $target = $(event.currentTarget),
        val = $target.attr('data-value'),
        $inp = $target.find('input[type="checkbox"]'),
        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();

    // This code is used to set the selection[] hidden input to true when the checkbox is checked 
    // and to false when the check mark is cleared
    $tap = $target.find('input[name*="selection"]');
    if ($inp.prop("checked")) {
        $tap.val('true');
    } else {
        $tap.val('false');
    }

    return false;
});

var length = $('.dropdown-menu > option').length;

var cb = $('.dropdown-menu input[type=checkbox]:checked'); // Selected chechboxes
var cnt = $('.CompNameBox'); // Container where to output text
if (cb.length === 1)
    cnt.text(cb.parent().text());
else if (cb.length > 1)
    cnt.text('Selected ' + cb.length + ' companies');
else if (cb.length === 0)
    cnt.text('Nothing selected');

HTML

 <div>
    <div class="row">
        <div class="col-md-1">
            <div class="btn-group" >
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width: 180px"> <span class="CompNameBox"></span> <span class="caret"></span></button>
                <ul class="dropdown-menu" style="width: 180px">
                    @if (Model.AvailableCompanies != null)
                    {
                        for (int i = 0; i < Model.AvailableCompanies.Count; i++)
                        {
                            if (Model.Companies.Contains(Model.AvailableCompanies[i], new CompanyViewModelComparer()))
                            {
                            <li>
                                <a href="#" class="small" data-value="option1" tabIndex="-1">
                                    <input type="checkbox" checked />&nbsp;@Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
                                    <input type="hidden" name="selection[@i]" value="true"/>
                                    <input type="hidden" name="ids[@i]" value="@Model.AvailableCompanies[i].ID" />
                                </a>
                            </li>
                            }
                            else
                            {
                            <li>
                                <a href="#" class="small" data-value="option1" tabIndex="-1">
                                    <input type="checkbox" />&nbsp;@Html.DisplayTextFor(model => Model.AvailableCompanies[i].NAME)
                                    <input type="hidden" name="selection[@i]" value="false" />
                                    <input type="hidden" name="ids[@i]" value="@Model.AvailableCompanies[i].ID" />
                                </a>
                            </li>
                            }

                        }
                    }
                </ul>
            </div>
        </div>
    </div>
</div>

来自 Chrome 的 HTML

<div class="row">
        <div class="col-md-1">
            <div class="btn-group open">
                <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown" style="width: 180px" aria-expanded="true"> <span class="CompNameBox">Selected 2 companies</span> <span class="caret"></span></button>
                <ul class="dropdown-menu" style="width: 180px">
                            <li>
                                <a href="#" class="small" data-value="option1" tabindex="-1">
                                    <input type="checkbox" checked="">&nbsp;TOro
                                    <input type="hidden" name="selection[0]" value="true">
                                    <input type="hidden" name="ids[0]" value="1">
                                </a>
                            </li>
                            <li>
                                <a href="#" class="small" data-value="option1" tabindex="-1">
                                    <input type="checkbox">&nbsp;My Comp
                                    <input type="hidden" name="selection[1]" value="false">
                                    <input type="hidden" name="ids[1]" value="2">
                                </a>
                            </li>
                            <li>
                                <a href="#" class="small" data-value="option1" tabindex="-1">
                                    <input type="checkbox" checked="">&nbsp;France
                                    <input type="hidden" name="selection[2]" value="true">
                                    <input type="hidden" name="ids[2]" value="3">
                                </a>
                            </li>
                            <li>
                                <a href="#" class="small" data-value="option1" tabindex="-1">
                                    <input type="checkbox">&nbsp;Germany Corp
                                    <input type="hidden" name="selection[3]" value="false">
                                    <input type="hidden" name="ids[3]" value="4">
                                </a>
                            </li>
                </ul>
            </div>
        </div>
    </div>

Answer 1

我认为问题出现在var options = []，初始化时没有值，但是你的html代码中的一些输入标签已经被检查过了。所以当你第一次点击时，js函数不能从options中取这个标签。从收藏中删除。请修改选项集合的初始化方法。