绑定到Bootstrap单选按钮状态更改

Question

我在一个也使用jQuery的页面中有以下Bootstrap HTML：

<div class="btn-group" data-toggle="buttons-radio">
    <button id="copyButton" class="btn btn-small btn-primary">Copy</button>
    <button id="editButton" class="btn btn-small btn-primary">Modify</button>
    <button class="btn btn-small btn-primary active">Do nothing</button>
</div>

这三个按钮出现在表格的每一行上（对于每一行，用户必须选择一个动作）。

我想显示和更新Copy按钮处于活动状态的行数以及Modify按钮处于活动状态的行数。

我尝试添加以下函数，该函数由绑定到按钮的click事件的按钮类型特定函数调用：

function updateCounts() {
    var modifyValueCount = $("button[id=editButton].active").length;
    var copyValueCount = $("button[id=copyButton].active").length;
    $("#variablesToModifyCount").text(modifyValueCount);
    $("#variablesToCopyCount").text(copyValueCount);
}  

但在我看来，刚刚点击的按钮没有包含在计数中，因为active类直到调用onClick结束后才会应用。我也试过绑定到mouseup事件，但它似乎也很快。

Answer 1

点击时，您可以尝试检查它是否已处于活动状态。所以它并没有真正解决问题，因为它被告知有关bootstrap的活动但是你的例子是一种解决方法，

$(document).ready(function () {
    $('button').on('click', function () {
        if ($(this).is("#editButton")) {
            if (!$(this).is("#editButton.active")) {
                updateCounts(1, 0);
            } else {
                updateCounts(-1, 0);
            }
        } else if ($(this).is("#copyButton")) {
            if (!$(this).is("#copyButton.active")) {
                updateCounts(0, 1);
            } else {
                updateCounts(0, -1);
            }
        }
    });


});

function updateCounts(changeEdit, changeCopy) {
    var modifyValueCount = parseFloat($("#variablesToModifyCount").text()) + changeEdit;
    var copyValueCount = parseFloat($("#variablesToCopyCount").text()) + changeCopy;
    $("#variablesToModifyCount").text(modifyValueCount < 0 ? 0 : modifyValueCount);
    $("#variablesToCopyCount").text(copyValueCount < 0 ? 0 : copyValueCount);
}

http://jsfiddle.net/HWfVN/

修改 这是基于bootstrap2.3.2和上面的切换行为非复选框， （非常粗略的实现只提供 检查点击时是否存在活动类以便相应采取行动的示例 ）

    $(document).ready(function () {
    $("#variablesToModifyCount").text($("button[id=editButton].active").length);
    $("#variablesToCopyCount").text($("button[id=copyButton].active").length);

    $('button').on('click', function () {
        updateCounts($(this).is("#editButton") && !$(this).is("#editButton.active"),
        $(this).is("#copyButton") && !$(this).is("#copyButton.active"),
                     !$(this).is('#editButton')&&!$(this).is('#copyButton'));
    });


});

function updateCounts(incrementEdit, incrementCopy, decrementAll) {
    var modifyValueCount = $("button[id=editButton].active").length;
    var copyValueCount = $("button[id=copyButton].active").length;
    if(incrementEdit){
        modifyValueCount++;
        copyValueCount--;
    }
    if(incrementCopy){
        copyValueCount++;
        modifyValueCount--;
    }
    if(decrementAll){
        copyValueCount--;
        modifyValueCount--;
    }

    $("#variablesToModifyCount").text(modifyValueCount < 0 ? 0 : modifyValueCount);
    $("#variablesToCopyCount").text(copyValueCount < 0 ? 0 : copyValueCount);
}

http://jsfiddle.net/HWfVN/3/