Javascript 引导复选框按钮事件传播问题

我有一个自定义面板栏，面板标题部分有一个div。单击此面板应展开/折叠面板内容，使用jQuery切换可以很好地工作

在面板标题中，我放置了一个引导复选框，其目的是选中该复选框将激活该面板，但不会影响面板内容是否展开或折叠

问题：

单击复选框可选中和取消选中引导复选框，但也可展开/折叠面板内容

我一直在尝试的：

我一直在尝试停止复选框上的传播，认为在任何引导程序附加事件的地方，我都可能能够阻止面板标题上的单击事件发生

//try get rid of event bubbling for checkboxes
$(".btn-group.checkbox").on("change", function (e)
{
    /*I've tried each of these variations*/
    //e.stopPropagation();
    //e.preventDefault();
    //return false;
});

我还尝试了单击事件而不是更改，并且在btn组中的.btn元素上尝试了此操作：

//try get rid of event bubbling for checkboxes
$(".btn-group.checkbox .btn").on("change", function (e)
{
    /*I've tried each of these variations*/
    //e.stopPropagation();
    //e.preventDefault();
    //return false;
});

这些选项中没有一个作为复选框工作，但仍会导致面板内容显示和隐藏

你能试试这个吗

$（“.btn-group.checkbox.btn”）。打开（“更改”，函数（e）{
如果（！e）var e=window.event
e、 取消气泡=真；
//试试这个
如果（e.stopPropagation）e.stopPropagation（）；

//如果上述代码不起作用，请尝试
//如果（e.stopImmediatePropagation）e.stopImmediatePropagation（）；
});

---

希望这对你有用：）

我意识到我可能看错了。我仍然不能100%确定为什么我不能使用stopPropagation，我怀疑这与Bootstrap已经绑定了自己的事件处理程序有关，但我不能完全相信

我的另一种方法是连接panel bar head部分的click事件，然后检查原始事件的目标以查看它来自何处。如果是自定义复选框，我会忽略它，允许引导复选框执行它的操作。如果没有，则切换面板内容

代码如下：

//handle the panel bar header click event
$(".pnl-01-bar").click(function (e)
{
    //get a jquery reference to the original target of this event
    var $target = $(e.originalEvent.target);

    //if this did NOT come from the checkbox
    if (!$target.hasClass("bs-checkbox"))
    {
        //toggle the panel content
        $("#pnlSlider1").toggle();
    }            
});

以下是HTML：

<div class="scenario-heading pnl-01-bar">
    <div class="col-md-3">
        <div data-toggle="buttons" class="btn-group checkbox">
        <label class="btn btn-primary  checkbox" for="UseRetirementAge">
        <span class="bs-checkbox"></span>
        <input type="checkbox" style="visibility: hidden" data-val="1" id="UseRetirementAge" name="UseRetirementAge" value="1">
        </label>
        </div>
        <span data-valmsg-replace="true" data-valmsg-for="UseRetirementAge" class="field-validation-valid"></span>
            Change my retirement date
        </div>
</div>
<div class="scenario-panel">
    <div style="display:none" id="pnlSliders1">
        ...panel content goes here
    </div>
</div>

改变我的退休日期
…面板内容在这里

jsfiddle将不胜感激：）您正在使用引导折叠插件吗？你提到过使用jQuery切换吗？请发布您的标记和您可能用于切换面板的任何javascript。@jme11面板栏是自定义的，我们没有使用BS插件，但我同时找到了一个可行的解决方案。谢谢您的输入，但我已经尝试过了，但没有任何运气。