bootstrap-switch does not fire checkedchanged on asp.net checkbox
<p>I'm using two asp.net ckeckboxes (chk1, and chk2) in a Web Forms project with MasterPage, and I'd like when I click over chk1, the chk2 becomes disable and viceverse without refreshing the entire page, so I'm using updatepanel to achieve this, I just implement the CheckedChanged event on the chk1 and put its AutoPostBack attribute to "true", and everything is ok.</p>

<p>The problem is when I try to implement the bootstrap-switch plugin (the two checkboxes seems like bootstrap-switch perfectly), but the problem is that when I click on the chk1, then the CheckedChanged is not fired, so the enable property of the chk2 is not affected.</p>

<p>I think the problem is when the user clicks on the chk1, in fact the click happens over the span's element's of the bootstrap-switch instead of the chk1 itself.</p>

<p>Please help, sorry for the english.</p>

<p><strong>Update 1:</strong></p>

<p>This is the source code of the page when it is running (right click on the browser), so you can see the bootstrap-switch libraries needed are present:</p>

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

&lt;script type="text/javascript"&gt;
//&lt;![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();
    }
}
//]]&gt;
&lt;/script&gt;



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

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


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

                            &lt;ul class="nav navbar-nav navbar-right"&gt;
                                &lt;li&gt;&lt;a href="Account/Register"&gt;Registrarse&lt;/a&gt;&lt;/li&gt;
                                &lt;li&gt;&lt;a href="Account/Login"&gt;Iniciar sesión&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;

                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="container body-content"&gt;


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

            &lt;input id="MainContent_chk2" type="checkbox" name="ctl00$MainContent$chk2" /&gt;&lt;label for="MainContent_chk2"&gt;Check 2&lt;/label&gt;

&lt;/div&gt;




            &lt;hr /&gt;
            &lt;footer&gt;
                &lt;p&gt;&amp;copy; 2016 - Mi aplicación ASP.NET&lt;/p&gt;
            &lt;/footer&gt;
        &lt;/div&gt;

&lt;div class="aspNetHidden"&gt;

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

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

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>And now this is the Test.aspx file:</strong></p>

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

&lt;asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"&gt;

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



&lt;/asp:Content&gt;
</code></pre>

<p><strong>And now this is the Test.aspx.cs file:</strong></p>

<pre><code>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;
            }
        }
    }
}
</code></pre>

<p>In the last file I have posted: "Test.aspx.cs", in the Page_Load event I have to add that attributes manually to the "chk1" in order to obtain the "switch" effect, because if I put that attributes ("data-size", "data-on-text", "data-off-text", and "class") in the aspx editor then it does not work at runtime, and if I delete that lines of code then the CheckedChanged works, but the style of the switch does not work.</p>

<p>Hope I have explain me in more detail, any question please ask me.</p>