Question

在我的网页上，我有三个用于过滤的复选框，它们都是通过“程序化”使用引导程序来使用“ticks”而不是标准复选框。

完整标记

<!DOCTYPE html>
<html>
<head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <style>
        .RAGStatus2 {
        }

            .RAGStatus2 .active .checked {
                display: inline-block;
            }

            .RAGStatus2 .checked {
                display: none;
            }
    </style>


</head>
<body>
    <span class="RAGStatus2 pull-right">
        <span class="btn-group" data-toggle="buttons">
            <label class="ragButtons btn btn-info active" style="width:50px; height: 30px; display: inline" id="blue">
                <input disabled="disabled" type="checkbox" id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Blue)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Blue)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Blue)" />
                <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
            </label>
            <label class="ragButtons btn btn-warning active" style="width:50px; height: 30px; display: inline" id="amber">
                <input disabled="disabled" type="checkbox" id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Amber)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Amber)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Amber)" />
                <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
            </label>
            <label class="ragButtons btn btn-danger active" style="width:50px; height: 30px; display: inline" id="red">
                <input disabled="disabled" type="checkbox" id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Red)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Red)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Red)" />
                <span class="glyphicon glyphicon-hidden unchecked"></span> <span class="glyphicon glyphicon-ok checked"></span>
            </label>
        </span>
    </span>

    <textarea id="debug" style="width: 100%; height: 300px"></textarea>

    <script src="https://code.jquery.com/jquery-3.1.0.js" integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk=" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


    <script type="text/javascript">
        $(function () {
            $(".ragButtons").change(function (e) {
                $("#debug").val("");
                $(".ragButtons").each(function () {
                    if ($(this).hasClass("active")) {
                        $("#debug").val($("#debug").val() + $(this).attr("id") + "\r\n");
                    }
                });
            }
            );
        });
    </script>
</body>
</html>

这是jsfiddle =＆gt; https://jsfiddle.net/0qrqcbvd/

现在，我的问题是，当我点击其中一个框时，我想仅使用ACTIVE过滤器进行ajax调用，但click（）事件不会及时停用按钮...它总是一步后面..

打开表单时，所有三个都设置为活动...

点击其中一个按钮关闭，调试仍显示所有三个
再次点击它以重新打开，现在调试显示两个（我们点击的那个没有显示）
第三次点击（再次关闭），然后再次显示所有三个（应该是2）。

我尝试过使用“onmouseup”但得到相同的结果

*更新*

当我发布这个片段时，我使用了最新版本的Bootstrap / jQuery实际上解决了这个问题，但是，从这个代码中提取的实际系统使用的是Bootstrap 3.0.0和jQuery 1.10.2

这是最新的jsFiddle =＆gt; https://jsfiddle.net/0qrqcbvd/16/

Answer 1

这是因为BUTTON DATA-API使用委托事件处理程序来切换复选框的状态。

解决方案是使用由change插件触发的button事件，例如

$(function() {
  $(".ragButtons").change(function(e) {
    $("#debug").val($(".ragButtons.active").map(function() {
      return this.id;
    }).get().join('\r\n'));
  });
});

.RAGStatus2 {} .RAGStatus2 .active .checked {
  display: inline-block;
}
.RAGStatus2 .checked {
  display: none;
}

<script src="https://code.jquery.com/jquery-1.10.0.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<span class="RAGStatus2 pull-right">
        <span class="btn-group" data-toggle="buttons">
            <label class="ragButtons btn btn-info active" style="width:50px; height: 30px; display: inline" id="blue">
                <input disabled="disabled" type="checkbox" checked id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Blue)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Blue)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Blue)" />
                <span class="glyphicon glyphicon-hidden unchecked"></span>  <span class="glyphicon glyphicon-ok checked"></span>
</label>
<label class="ragButtons btn btn-warning active" style="width:50px; height: 30px; display: inline" id="amber">
  <input disabled="disabled" type="checkbox" checked id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Amber)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Amber)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Amber)" />
  <span class="glyphicon glyphicon-hidden unchecked"></span>  <span class="glyphicon glyphicon-ok checked"></span>
</label>
<label class="ragButtons btn btn-danger active" style="width:50px; height: 30px; display: inline" id="red">
  <input disabled="disabled" type="checkbox" checked id="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Red)" autocomplete="off" value="@(ITOpsStatus.DataAccess.AlertLevel.Red)" class="ragButton_@(ITOpsStatus.DataAccess.AlertLevel.Red)" />
  <span class="glyphicon glyphicon-hidden unchecked"></span>  <span class="glyphicon glyphicon-ok checked"></span>
</label>
</span>
</span>

<textarea id="debug" style="width: 100%; height: 300px"></textarea>

Bootstrap jQuery“Active”选择器事件

1 个答案: