Question

我有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，然后设置必要的checked属性，以便后面的代码正常运行，但由于母版页上的更新面板，我无法获得完整的回发跑。

有没有办法让一个按钮组显示，但是当点击其中一个按钮时有完整的回发运行？

Answer 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函数的内容中删除的任何建议都是非常感谢。

Answer 2

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

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

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

2 个答案: