Asp radio buttons using bootstrap 3 to make them appear as toggle buttons

Question

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

Answer 1

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')
        }
    }
}

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"

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

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.