Question

Here is my setup: If radiobutton1 is already checked when the page loads (it has checked="checked" in view source) and I try to uncheck it after selecting radiobutton2, the checked attribute on radiobutton1 is not getting removed after selecting radiobutton2:

if($('#' + radiobutton1_ID).is(':checked'))
    UncheckRadioButton('#' + radiobutton2_ID);

// Utility function to clear a radiobutton's "checked" attribute
function UncheckRadioButton(radiobuttonID) {
    radiobuttonID.removeAttr("checked"); 
}

After selecting radiobutton2 and doing a “View Source” I see no checked="checked" on radiobutton2 (even though the page shows this button as checked), and for radiobutton1 it still shows checked="checked". Why is that? It should be the other way around.

---

UPDATE

Here is some more of my code. I know that the if statement portions are getting hit so that’s not the issue, and I know the radio button IDs (ccRadioBtn, checkRadioBtn and paypalRadioButton) I am using are correct:

    var ccRadioBtn = ccRadioButton; // credit card radio button ID
    var paypalRadioButton = payPalRadioClientID;

    // ...

    if (paypalIsSelected()) {
        UncheckRadioButton(checkRadioBtn);
        UncheckRadioButton(ccRadioBtn);

        // ...
    } else {
        // force a clear on any previously selected payment options
        CheckRadioButton(ccRadioBtn); // default to credit card radio button
        UncheckRadioButton(paypalRadioButton);
        UncheckRadioButton(checkRadioBtn);

        // ...
    }
}

function UncheckRadioButton(radiobuttonID) {
    $('#' + radiobuttonID).removeAttr("checked"); 
}

function CheckRadioButton(radiobuttonID) {
    $('#' + radiobuttonID).attr('checked', true);
}

The problem is: If one radio button defaults to checked="checked" and I click another radio button, the first radio button’s checked attribute should be removed but it’s not. And the second radio button that has been selected has no checked="checked" as it should. I can see this when I view the page source. I am not sure why that is not working.

Answer 1

You’re passing a string here:

UncheckRadioButton('#' + radiobutton_2_ID);

But trying to use it as a jQuery object here:

radiobuttonID.removeAttr("checked");
//which is actually doing this:
"#something".removeAttr("checked"); //.removeAttr() is not a function for string

You need to wrap it to use it as a selector, like this:

$(radiobuttonID).removeAttr("checked");

As for the view source…it depends in the browser, IE for example will show the original source of the page, not the state you’re currently viewing.