使用 bootstrap 3 的 Asp 单选按钮使它们显示为切换按钮答案

【问题标题】：Asp radio buttons using bootstrap 3 to make them appear as toggle buttons使用 bootstrap 3 的 Asp 单选按钮使它们显示为切换按钮
【发布时间】：2018-05-20 20:20:36
【问题描述】：

我有 4 个 asp 单选按钮，我希望它们看起来像切换按钮，但仍可用作 asp 单选按钮。主要是，我需要在单击按钮时触发 CheckedChanged 事件。目前，这就是我的 HTML：

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>   
<div class="col-xs-10 btn-group colors" data-toggle="buttons">
    <div class="row">
        <div id="tbl_rdo_ach" runat="server" class="col-xs-2">
            
            <label class="btn btn-primary">
                ACH/E-Check
                <asp:RadioButton ID="rdo_ach" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
                        AutoPostBack="True" Text="ACH/E-Check" CssClass="radioButton"></asp:RadioButton>
            </label>
        </div>
        <div id="tbl_rdo_cc" runat="server" class="col-xs-2">
            <label class="btn btn-primary">
                Debit/Credit Card
                <asp:RadioButton ID="rdo_cc" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
                    AutoPostBack="True" Text="Debit/Credit Card" CssClass="radioButton"></asp:RadioButton>
            </label>
        </div>
        <div id="tbl_rdo_ck" runat="server" class="col-xs-2">                
            <label class="btn btn-primary">
                Check
                <asp:RadioButton ID="rdo_ck" runat="server" Font-Bold="True" GroupName="rdo_pay_type"
                        AutoPostBack="True" Text="Check"></asp:RadioButton>
            </label>
         </div>
         <div id="tbl_rdo_et" runat="server" class="col-xs-2">
            <label class="btn btn-primary">
                EFT
                <asp:RadioButton ID="rdo_et" Font-Bold="True" GroupName="rdo_pay_type" AutoPostBack="True"
                    Text="EFT Deposit" runat="server"></asp:RadioButton>
            </label>
        </div>
    </div>
</div>

radioButton CSS 类：

<style type="text/css">
    .radioButton {
        display:none;
    }
</style>

我目前遇到的问题是当我在 asp:RadioButtons 上没有 radioButton css 类时，单选按钮通过按钮组显示，您必须在单选内专门单击才能触发 CheckedChanged 事件。当我在单选按钮上有类时，单选按钮不会通过按钮组显示，但是当我单击按钮时，CheckedChanged 事件根本不会触发。

我还尝试使用 asp:Button 而不是 asp:RadioButton 然后设置必要的检查属性，以便后面的代码正常运行，但由于母版页上的更新面板，我无法获得完整的回发到跑步。

是否有任何方法可以显示按钮组，但在单击其中一个按钮时会运行完整的回发？

【问题讨论】：

标签： asp.net twitter-bootstrap-3

【解决方案1】：

我想通了。问题是处理切换按钮的 javascript 不允许回发触发。由于不想更改所有切换按钮的功能，所以我将data-toggle="buttons" 更改为data-toggle="buttons-postback" 并将bootstrap.js 中的Button.prototype.toggle 函数修改为：

Button.prototype.toggle = function () {
    var changed = true
    var $parent = this.$element.closest('[data-toggle="buttons"]')

    if ($parent.length) {
        var $input = this.$element.find('input')
        if ($input.prop('type') == 'radio') {
            if ($input.prop('checked')) changed = false
            $parent.find('.active').removeClass('active')
            this.$element.addClass('active')
        } else if ($input.prop('type') == 'checkbox') {
            if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
            this.$element.toggleClass('active')
        }
        $input.prop('checked', this.$element.hasClass('active'))
        if (changed) $input.trigger('change')
    } else {
        var $parent = this.$element.closest('[data-toggle="buttons-postback"]')
        if ($parent.length) {
            var $input = this.$element.find('input')
            if ($input.prop('type') == 'radio') {
                if ($input.prop('checked')) changed = false
                $parent.find('.active').removeClass('active')
                this.$element.addClass('active')
            } else if ($input.prop('type') == 'checkbox') {
                if (($input.prop('checked')) !== this.$element.hasClass('active')) changed = false
                this.$element.toggleClass('active')
            }
            $input.prop('checked', this.$element.hasClass('active'))
            if (changed) $input.trigger('change')
            __doPostBack($input.id, '')
        } else {

            this.$element.attr('aria-pressed', !this.$element.hasClass('active'))
            this.$element.toggleClass('active')
        }
    }
}

我添加的部分几乎是函数的精确副本，但在处理结束时添加__doPostBack($input.id, '')，当它找到带有data-toggle="buttons-postback"的父级时

由于回发将 HTML 重置为其原始状态，我还在后面的代码中将其添加到事件处理程序中：

ach_lbl.Attributes.Add("Class", "btn btn-primary active")
If tbl_rdo_cc.Visible Then
    cc_lbl.Attributes.Add("Class", "btn btn-primary")
End If
If tbl_rdo_ck.Visible Then
    ck_lbl.Attributes.Add("Class", "btn btn-primary")
End If
If tbl_rdo_et.Visible Then
    et_lbl.Attributes.Add("Class", "btn btn-primary")
End If

我知道这可能不是最优雅的解决方案（因为我几乎不了解我修改的 JavaScript），所以任何关于我可以从添加到 Button.prototype.toggle 函数中删除的内容的建议都是非常感谢。

【讨论】：

【解决方案2】：

我用另一种方法解决了问题：

删除data-toggle="buttons"
通过 HTML 标签内的 asp <% %> 标签处理切换

【讨论】：