Javascript jQuery click（）在引导单击后触发，导致冲突

我在一个页面（）上安装了带有jQuery 1.11.0的Bootstrap 3.3.5（CSS和JS）和一系列复选框的

btn组。我试图将jQuery click事件绑定到所有标签（按钮），这些标签将统计选中的输入，如果选择零，则显示验证消息

此外，我想删除所选按钮的
btn default
并添加
btn primary
，这样它将在UI中更加突出。这将同时应用
btn主
和
活动
类。但是，我的jQuery
click（）
似乎在启动单击之前启动，因此我的函数返回不准确的数据（就用户而言）

引导事件完成后，如何使jQuery
click（）
事件激发

，谢谢

HTML:

<div class="form-group">
    <label class="control-label col-sm-2 control-label-colon-after" for="Selected_Days">Selected Days</label>
    <div class="col-sm-4">
        <div>
            <div class="btn-group btn-group-justified" data-toggle="buttons" id="dayOfWeekGroup">
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Monday">
                    <input autocomplete="off" id="DayOfWeek_Monday" name="DayOfWeek_Monday" type="checkbox" value="Monday"> Mon
                </label>
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Tuesday">
                    <input autocomplete="off" id="DayOfWeek_Tuesday" name="DayOfWeek_Tuesday" type="checkbox" value="Tuesday"> Tue
                </label>
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Wednesday">
                    <input autocomplete="off" id="DayOfWeek_Wednesday" name="DayOfWeek_Wednesday" type="checkbox" value="Wednesday"> Wed
                </label>
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Thursday">
                    <input autocomplete="off" id="DayOfWeek_Thursday" name="DayOfWeek_Thursday" type="checkbox" value="Thursday"> Thu
                </label>
                <label class="btn btn-default pcs-weekday" id="lblDayOfWeek_Friday">
                    <input autocomplete="off" id="DayOfWeek_Friday" name="DayOfWeek_Friday" type="checkbox" value="Friday"> Fri
                </label>
                <label class="btn btn-default pcs-weekend" id="lblDayOfWeek_Saturday">
                    <input autocomplete="off" id="DayOfWeek_Saturday" name="DayOfWeek_Saturday" type="checkbox" value="Saturday"> Sat
                </label>
                <label class="btn btn-default pcs-weekend" id="lblDayOfWeek_Sunday">
                    <input autocomplete="off" id="DayOfWeek_Sunday" name="DayOfWeek_Sunday" type="checkbox" value="Sunday"> Sun
                </label>
            </div>
        </div>

        <span id="dayOfWeekGroupValidationErr" class="field-validation-valid text-danger" style="display: none;">At least one day of the week is required to create a schedule block</span>
    </div>
</div>

尝试在js代码之后而不是之前添加引导js（scriptsrc），如下所示

<script>
    ... your code
</script>
<script src="/route/to/bootstrap.js">


... 你的代码

您还可以看到预绑定解决方案的这个答案，尝试在js代码之后而不是之前添加引导js（script src），如下所示

<script>
    ... your code
</script>
<script src="/route/to/bootstrap.js">


... 你的代码

此外，您还可以看到预绑定解决方案的此答案。问题在于您在哪里检查复选框值，因为在复选框值更改之前会触发单击事件。要解决此问题，可以使用更改事件

$('#dayOfWeekGroup label').change(function() { ... }

更新的fiddle:
问题在于检查复选框值的位置，因为在复选框值更改之前会触发单击事件。要解决此问题，可以使用更改事件

$('#dayOfWeekGroup label').change(function() { ... }

更新的小提琴：
您可能想尝试以下方法：

$('#dayOfWeekGroup input[type="checkbox"]').change(function(){
    var label = $(this).closest("label");

     // add primary class if button selected, or remove if deselected
    if ($(label).hasClass('active')){
        $(this).removeClass('btn-default').addClass('btn-primary');
    } else {
        $(this).removeClass('btn-primary').addClass('btn-default');
    }

    // count how many buttons are selected, and show a validation error if zero
    if ($("#dayOfWeekGroup").find(".active").length > 0) {
        $('#dayOfWeekGroupValidationErr').hide();
        return true;
    }
    $('#dayOfWeekGroupValidationErr').show();
    return true;
});

您可能希望尝试以下方法：

$('#dayOfWeekGroup input[type="checkbox"]').change(function(){
    var label = $(this).closest("label");

     // add primary class if button selected, or remove if deselected
    if ($(label).hasClass('active')){
        $(this).removeClass('btn-default').addClass('btn-primary');
    } else {
        $(this).removeClass('btn-primary').addClass('btn-default');
    }

    // count how many buttons are selected, and show a validation error if zero
    if ($("#dayOfWeekGroup").find(".active").length > 0) {
        $('#dayOfWeekGroupValidationErr').hide();
        return true;
    }
    $('#dayOfWeekGroupValidationErr').show();
    return true;
});

正是我要找的！透过森林看不见树木。谢谢你@caeth！正是我要找的！透过森林看不见树木。谢谢你@caeth！