使用Bootstrap 3使ASP单选按钮显示为切换按钮

问题描述：

我有4个单选按钮，它们希望像切换按钮一样显示，但仍然可以用作单选按钮.主要是，我需要在单击按钮时触发CheckedChanged事件.目前，这是我拥有的HTML:

I have 4 asp radio buttons that I want to appear like toggle buttons, but still function as asp radio buttons. Mainly, I need the CheckedChanged event to fire when the button is clicked. Currently, this is what I have for the 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类:

The radioButton CSS class:

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

我当前遇到的问题是当我在asp:RadioButtons上没有radioButton css类时，单选按钮显示在按钮组中，并且您必须专门单击单选按钮才能触发CheckedChanged事件.当我在单选按钮上确实有课程时，单选按钮不会在按钮组中显示，但是当我单击该按钮时，根本不会触发CheckedChanged事件.

The issue I am currently having is when I do not have the radioButton css class on the asp:RadioButtons, the radio button shows through the button group and you have to click specifically within the radio to get the CheckedChanged event to fire. When I do have the class on the radio buttons, the radio button does not display through the button group, but when I click the button, the CheckedChanged event won't fire at all.

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

I also attempted using asp:Button instead of asp:RadioButton and then setting the necessary checked property so that the code behind runs properly, but due to the update panel on the master page, I can't get a full postback to run.

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

Is there any way to get a button group to display, but have a full postback run when one of the buttons is clicked?

答

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

I figured it out. The issue is the javascript that handles the toggle buttons doesn't allow the postback to fire. Since I didn't want to change the functionality of all toggle buttons, I changed data-toggle="buttons" to data-toggle="buttons-postback" and modified the Button.prototype.toggle function in bootstrap.js to this:

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"

The part that I added is almost an exact copy of the function, but adds __doPostBack($input.id, '') at the end of the processing when it finds a parent with data-toggle="buttons-postback"

由于回发将HTML重置为其原始状态，因此我还将其添加到了我的代码中的事件处理程序中:

Since the postback resets the HTML to its original state, I also added this to the event handlers in my code behind:

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

I know this probably isn't the most elegant solution (due to the fact I barely understand the JavaScript I modified), so any suggestions on what I can remove from what I added to the Button.prototype.toggle function would be greatly appreciated.

使用Bootstrap 3使ASP单选按钮显示为切换按钮

相关推荐