bootstrap-switch 不会触发 asp.net 复选框上的 checkedchanged

Question

我在带有 MasterPage 的 Web 窗体项目中使用两个 asp.net ckeckbox（chk1 和 chk2），我希望当我点击 chk1 时，chk2 变为禁用状态，反之亦然，而不刷新整个页面，所以我使用 updatepanel 来实现这一点，我只是在 chk1 上实现 CheckedChanged 事件并将其 AutoPostBack 属性设置为 "true"，一切正常。

问题是当我尝试实现 bootstrap-switch 插件时（两个复选框看起来很像 bootstrap-switch），但问题是当我点击 chk1 时，那么 CheckedChanged 不会被触发，所以 chk2 的启用属性不受影响。

我认为问题出在用户点击 chk1 时，实际上点击发生在 bootstrap-switch 的 span 元素上，而不是 chk1 本身。

请帮忙，对不起英语。

更新 1：

这是运行页面的源代码（在浏览器上右击），所以你可以看到bootstrap-switch需要的库已经存在：

<html lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>
     - Mi aplicación ASP.NET
</title><script src="/Scripts/modernizr-2.6.2.js"></script>
<link href="/Content/bootstrap.css" rel="stylesheet"/>
<link href="/Content/Site.css" rel="stylesheet"/>
<link href="/Content/bootstrap-switch/bootstrap3/bootstrap-switch.css" rel="stylesheet"/>
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon" /></head>
<body>
    <form method="post" action="./Test" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="h5sbkKDqDt9VeL5xnED+gV4kWiRKNFZBx2sOsl8K60EaOVXCuj7iQZJ3QAjjzsLsrj7CnOY8SUD81Mv51jUBYfWpQL0EHuQO3uPa8Yczm/eLjURJjkDTB57Iw5RJUitxpbKigIF0l4NevEGllIgA8hU3zjrDgSCrPtUA3qs7CJO+/ukopmdmKjOkgTjjWniVywgiMskpJEGPl3fzldVSaqkj8Ikbh+OElJUyureaFxNDS7bLq90ZhlVeNNZxorYyvtaj1HxMgniGxdfx0eClL+RD3ksd+mO6kkzV8mSXx+ykvf+A3Z2gcV0wjAcfpc09oxBF8vvsEtwBbJ+WbDlZLnGqn5W7GAFmmqD2l3e8AAFO6Sh0++Ivr057G/pw+FyebisB2dEOZeb2KZbNxL9/imrP/bBFcKrcyPeGiRUaXtjd7VPTXnD8Vox3T97yjv4P" />
</div>

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['ctl01'];
if (!theForm) {
    theForm = document.ctl01;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>



<script src="/bundles/MsAjaxJs?v=c42ygB2U07n37m_Sfa8ZbLGVu4Rr2gsBo7MvUEnJeZ81" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('Error al cargar el marco de trabajo de cliente ASP.NET Ajax.');
//]]>
</script>

<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/bootstrap.js" type="text/javascript"></script>
<script src="Scripts/respond.js" type="text/javascript"></script>
<script src="/bundles/WebFormsJs?v=AAyiAYwMfvmwjNSBfIMrBAqfU5exDukMVhrRuZ-PDU01" type="text/javascript"></script>
<script src="Scripts/bootstrap-switch.js" type="text/javascript"></script>
        <script type="text/javascript">
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$ctl09', 'ctl01', ['tctl00$MainContent$UpdatePanel1','MainContent_UpdatePanel1'], ['ctl00$MainContent$chk1','MainContent_chk1'], [], 90, 'ctl00');
//]]>
</script>


        <div class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="./" class="navbar-brand">Nombre de la aplicación</a>
                </div>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                        <li><a href="./">Inicio</a></li>
                        <li><a href="About">Acerca de</a></li>
                        <li><a href="Contact">Contacto</a></li>
                    </ul>

                            <ul class="nav navbar-nav navbar-right">
                                <li><a href="Account/Register">Registrarse</a></li>
                                <li><a href="Account/Login">Iniciar sesión</a></li>
                            </ul>

                </div>
            </div>
        </div>
        <div class="container body-content">


    <div class="col-sm-2">
        <input id="MainContent_chk1" type="checkbox" name="ctl00$MainContent$chk1" onclick="javascript:setTimeout(&#39;__doPostBack(\&#39;ctl00$MainContent$chk1\&#39;,\&#39;\&#39;)&#39;, 0)" class="BSswitch" data-size="mini" data-on-text="Si" data-off-text="No" /><label for="MainContent_chk1">Check 1</label>
    </div>
    <div id="MainContent_UpdatePanel1">

            <input id="MainContent_chk2" type="checkbox" name="ctl00$MainContent$chk2" /><label for="MainContent_chk2">Check 2</label>

</div>




            <hr />
            <footer>
                <p>&copy; 2016 - Mi aplicación ASP.NET</p>
            </footer>
        </div>

<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="75BBA7D6" />
    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="3l2FbHNq3NkXeXDBNuO5RZ4xOmC254tC8PhZRAdihltuEWASclMPM3jqhsB2rrjNHLrlioMYf4cBMhfvlMRCUVMkZXg6Bmvc06rKj2GCmkK97sprq9puXxVbM2rKg+DDwC9aG2lPJIcCLM1viuOkLw==" />
</div></form>
    <script>
        $("[class='BSswitch']").bootstrapSwitch();
    </script>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Internet Explorer","requestId":"41bd03d14e3342bebd4c2f830342b157"}
</script>
<script type="text/javascript" src="http://localhost:30137/825094549df74919a4a0dc141549d775/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

现在这是 Test.aspx 文件：

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="TestBSswitch.Test" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">

    <div class="col-sm-2">
        <asp:CheckBox ID="chk1" AutoPostBack="true" Text="Check 1" OnCheckedChanged="chk1_CheckedChanged" runat="server" />
    </div>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:CheckBox ID="chk2" Text="Check 2" runat="server" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="chk1" />
        </Triggers>
    </asp:UpdatePanel>



</asp:Content>

现在这是 Test.aspx.cs 文件：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace TestBSswitch
{
    public partial class Test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            chk1.InputAttributes.Add("class", "BSswitch");
            chk1.InputAttributes.Add("data-size", "mini");
            chk1.InputAttributes.Add("data-on-text", "Si");
            chk1.InputAttributes.Add("data-off-text", "No");

            chk2.InputAttributes.Add("class", "BSswitch");
            chk2.InputAttributes.Add("data-size", "mini");
            chk2.InputAttributes.Add("data-on-text", "Si");
            chk2.InputAttributes.Add("data-off-text", "No");
        }

        protected void chk1_CheckedChanged(object sender, EventArgs e)
        {
            if (chk1.Checked)
            {
                chk2.Enabled = false;
            }
            else
            {
                chk2.Enabled = true;
            }
        }
    }
}

在我发布的最后一个文件中："Test.aspx.cs"，在 Page_Load 事件中我必须将该属性手动添加到 "chk1" 以获得 "switch" 效果，因为如果我将属性（"data-size"、"data-on-text"、"data-off-text" 和 "class"）放在 aspx 编辑器中，那么它在运行时不起作用，如果我删除那几行代码，然后 CheckedChanged 工作，但开关的样式不起作用。

希望我已经解释得更详细了，有什么问题可以问我。

Answer 1

我只是想弄清楚类似的情况。由于 bootstrap-switch 阻止触发 CheckedChanged 事件，我建议使用 jquery 和 bootstrap-switch 提供的 switchChange 事件，如下所示：

$('#<%= chk1.ClientID%>').on('switchChange.bootstrapSwitch', function (event, state) {
    if (state) { //if chk1's switch is set to true
        $('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', true);
    }
    else {
        $('#<%= chk2.ClientID%>').bootstrapSwitch('disabled', false);
    }
});

bootstrap-switch 不会触发 asp.net 复选框上的 checkedchanged

bootstrap-switch does not fire checkedchanged on asp.net checkbox

asp.net

checkbox

bootstrap-switch