Determining selected state of jQuery Buttons

Question

I've got two radio buttons in a .net page which are being transformed to jQuery buttons a la http://jqueryui.com/demos/button/#radio

When the page is loaded I have button 2 as checked. When clicking the buttons I'm firing the postback event. Problem is you can click on that button that is selected by default on the initial load i.e. Button 2, the postback is fired but the event handler isn't called in the .net code behind because the radio button is already classed as selected (and in normal circumstances wouldn't allow the postback to fire).

To get around this I've added the e.PreventDefault() method BUT this is causing issues when Button 1 is clicked because before the click handler is called the button is set to selected. Therefore, in every case in the following code e.PreventDefault() is called:

$(document).ready(function(){
    $("[id*='rbPayable']").click(function(e){
        if ($("[id*='rbPayable']").attr("checked"))
            e.preventDefault();
        else
            setTimeout('__doPostBack(\'this.id\',\'\')', 0)
    })
    $("[id*='rbReceivable']").click(function(e){
        if ($("[id*='rbReceivable']").attr("checked"))
            e.preventDefault();
        else
            setTimeout('__doPostBack(\'this.id\',\'\')', 0)
    })
});

What is the best way for me to load the page and effectively be able to do the following: 'If rbReceivable is checked then don't do anything otherwise do a postback.'

Answer 1

here, try something like this

$(document).ready(function() {
    $('#radio').buttonset();

    // create a handle for the initially checked button.
    var checkedButton = $('.radio:checked');        

    // assuming all your radio buttons have 'radio' classname
    $('.radio').click(function() {
        var button = $(this);
        if ( button[0].id == checkedButton[0].id ) {
            return false;
        } else {
            // do stuff
            checkedButton = button;
        }
    });
});

Answer 2

I fixed this another way:

$(document).ready(function(){
    if ($("[id*='rbReceivable']").attr("checked"))
    {
        $("[id*='rbPayable']").click(function(e){
            setTimeout('__doPostBack(\'this.id\',\'\')', 0)
        })
    }
    else
    {
        $("[id*='rbPayable']").click(function(e){
            setTimeout('__doPostBack(\'this.id\',\'\')', 0)
        })
    }
});

Doing this sets the click handler on the other button when the selected button is loaded as checked.