How to make disabled/readonly functionality for radio buttons and checkboxes

If radio button is already checked and if you click on checked radio button it change value from true to false. For this scenario following code works

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

selectedRow
    .find('input[type="radio"]:not(:checked)')
    .each(function(){
        $(this).attr('disabled', true);
});

selected row is just the HTML element below which I want to locate the radio buttons I am interested.
the whole script is only called once a radio button has been selected.
when executed, it locates the unselected radio buttons and disables them.

hence, giving me the desired result of disabling the non-selected radio buttons, while maintaining the selected option.

this result seemed to be a better option, then
1. laying an image over the radio button, to avoid the user from selected another option.
2. .click(function(){ return false; }), which just hides the selection when the unselected option is selected 3. disabling all the radio buttons, where the selection is lost.

hope this helps you,
cheers.

You can use the following code to avoid clicks on elements you don't want user to change

$(':radio,:checkbox').click(function(){
    return false;
});

You can use proper selector to limit the clicks.

Yon can write like this:-

in your script:

 jQuery('#radio').attr('disabled','disabled');

or you can add class according to you..

if it will not compatible with IE give compatibility also..

<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="X-UA-Compatible" content="IE=7" />

then check..

you can also try this:

jQuery("#youridname input:radio").attr('disabled',true);