preventing a user from changing the state of a radio button

Question

I am trying to prevent a user from changing the state of a radio button using jquery or javascript. I could do this with the disabled property but I don\'t like the grayed o

Answer 1

How about

<input type="radio" onclick="return false;"/>

or

$(document).ready(function () {
    $(input[type = "radio"]).click(function () {
        return false;
    });
});

?

Answer 2

Try using the disabled property, since that is what it is for, but then change the style of the radio button using CSS.

However, that doesn't sound like a very intuitive User Experience. Users know what grayed out means, you probably shouldn't mess with that!

Answer 3

Try this

$(document).ready(function () {
    $('input[type = "radio"]').change(function () {
        return false;
    });
});

Answer 4

So once I got the quotes on my selector correct it worked.

$("input[type = radio]") 

or

$("input[type = 'radio']")

there are a bunch or options for the code of the change function that worked

this = false;
$(this).prop("checked", false);
$(this).attr("checked", false);
$(this).removeAttr("checked");
$(this).removeProp("checked");

Is there advantage to using one over the other? Is there a difference between the any of the four jquery functions to manipulate a tag's properties/attributes? Based on the docs it looks like prop/removeProp were just added in 1.6 and attr/removeAttr were added in 1.0 so are the attr/removeAttr just around for legacy purposes or is jquery suggesting one over the other?