Bootstrap with Radio Button toggle not triggering async postback inside update panel

Question

I'm trying to build the following:

<Update Panel>
  <Bootstrap Theme>
    <Radio Button 1>
    <Radio Button 2>
  <Bootstrap Theme>
  <AsyncPostBack Triggers>
<Update Panel>

ASP Markup:

<asp:UpdatePanel ID="updatePrd" runat="server">
                            <ContentTemplate>
                        <div class="row ">
                            <div class="col-md-5 id">Type Produced: </div>
                            <div class="col-md-5 def">
                                <div class="btn-group" data-toggle="buttons" style="padding-bottom:10px">
                                    <asp:Label id="btnTogGood" runat="server" CssClass="btn-baa btn-primary"></asp:Label>
                                </div>

                                <div class="btn-group" data-toggle="buttons" >
                                    <label class="btn btn-baa active enhanceButton">
                                        <asp:RadioButton ID="optGood" GroupName="prdType" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="optGood_CheckedChanged"/>
                                        GOOD
                                    </label>
                                    <label class="btn btn-baa enhanceButton">
                                        <asp:RadioButton ID="optScrap" GroupName="prdType" runat="server" AutoPostBack="true" OnCheckedChanged="optScrap_CheckedChanged"/>
                                        SCRAP
                                    </label>
                                </div>

                            </div>
                        </div>

                        <div class="row ">
                            <div class="col-md-5 id" runat="server" id="divScrapModal"> </div>
                            <div class="col-md-4 def">
                                <asp:TextBox id="txtScrapCode" runat="server" placeholder="01" Visible="false" ></asp:TextBox>
                            </div>
                        </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="optGood" EventName="CheckedChanged" />
                            <asp:AsyncPostBackTrigger ControlID="optScrap" EventName="CheckedChanged" />
                        </Triggers>
                    </asp:UpdatePanel>

The problem i'm experiencing is the Async postback triggers are not being fired. I have a hunch that this is because of the bootstrap themed div that is skinning the radio buttons. Not sure how to get this to work.

Many thanks!

EDIT: I should add that this code works 100% with just the radio buttons inside the update panel.

Note: this piece of code executes perfectly and fires an async postback:

<asp:UpdatePanel ID="updatePrd" runat="server">
                            <ContentTemplate>
                        <div class="row ">
                            <div class="col-md-5 id">Type Produced: </div>
                            <div class="col-md-5 def">

                                 <asp:RadioButton ID="optGood" GroupName="prdType" runat="server" Checked="true" AutoPostBack="true" OnCheckedChanged="optGood_CheckedChanged"/>
                                        GOOD


                                  <asp:RadioButton ID="optScrap" GroupName="prdType" runat="server" AutoPostBack="true" OnCheckedChanged="optScrap_CheckedChanged"/>
                                        SCRAP


                            </div>
                        </div>

                        <div class="row ">
                            <div class="col-md-5 id" runat="server" id="divScrapModal"> </div>
                            <div class="col-md-4 def">
                                <asp:TextBox id="txtScrapCode" runat="server" placeholder="01" Visible="false" ></asp:TextBox>
                            </div>
                        </div>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="optGood" EventName="CheckedChanged" />
                            <asp:AsyncPostBackTrigger ControlID="optScrap" EventName="CheckedChanged" />
                        </Triggers>
                    </asp:UpdatePanel>

Answer 1

I was able to work around the problem by using 2 buttons and some toggle logic (when button 1 isClicked, disable button1, etc) and using a css to theme the buttons. I'd still be interested in knowing why my original approach isn't working.