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");
    });
});

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");
    });
});

• javascript
• jquery
• html
• asp.net-mvc
• radio-button

4 Answers 4

How about

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

or

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

?

Try this

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

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!

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?