Question

我有一个带有btn-group系列复选框的页面（Fiddle）上安装了jQuery 1.11.0的Bootstrap 3.3.5（CSS和JS）。我正在尝试将jQuery单击事件绑定到所有标签（按钮），这些标签将计算已检查的输入并显示验证消息（如果选择为零）。

此外，我想删除btn-default并为所选按钮添加btn-primary，因此它会更多地在UI中脱颖而出。这将同时应用btn-primary和active类。然而，似乎我的jQuery click()在引导点击触发之前触发，因此我的函数返回不准确的数据（就用户而言）。

如何在引导事件完成后触发jQuery click()事件？

Fiddle here，谢谢！

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>

的JavaScript

$('#dayOfWeekGroup label').click(function() {

    // add primary class if button selected, or remove if deselected
    if ($(this).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('input:checked').length > 0) { 
        $('#dayOfWeekGroupValidationErr').hide();
        return true;
    }
    $('#dayOfWeekGroupValidationErr').show();
    return true;
});

Answer 1

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

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

更新了小提琴：http://jsfiddle.net/sk4suevu/3/

Answer 2

您可能想尝试一下：

$('#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;
});

Answer 3

尝试在js代码之后添加bootstrap js（script src），而不是之前，像这样

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

对于预绑定解决方案

，您也可以看到此答案jQuery bind event listener before another

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

3 个答案: