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 out look. I am showing the user a true/false state of one of my models, so I don't want them to be able to change it. There is only one radio button in the group that is either checked (true) or unchecked (false) based on the model, so they can't uncheck it but they can check and change the radio button state. The radio button doesn't get submitted in a form so it is only for reading from the database/model but it would be a bad user experience if they changed it to the opposite value that is actually in the database. Here is my latest attempt at the jquery and html structure.

<input type="radio" checked="checked">

or

<input type="radio">

and the jquery

$(document).ready(function () {
    $(input[type = "radio"]).change(function () {
        $(this).removeAttr("checked");
    });
});

Killian

Answer 1

Try this

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

Correggio

this.checked = false; means that le radio button will always be unchecked. What if the button is checked by default on page loading? A click would uncheck it, and yet we wanted it to remain unchanged. Returning false seems to be a better idea. – Cistaceous

Answer 2

How about

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

or

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

?

Responsum

this is perfect solution. after searching for almost an hour. for those who criticize a ' non-intuitive UX' - if users cannot see the dimmed radio button, that is a very bad user experience. – Imena

Answer 3

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!

Fennec

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?

Killian