Make the selected RadioButton in a RadioButtonList unclickable but not disabled

Question

I have an ASP.Net page with several RadioButtonList controls on it.

I want to display this page in a read-only format, but I would like the selected radiobutton in each RadioButtonList to appear "normal" ie not look disabled but not allow RadioButton to be clickable as I don't want the value to be modifyable.

I'm sure this has been answered somewhere but my googling is failing me at the moment...

Answer 1

How about overlaying a div on top of radio buttons container div with maximum z-index and alpha set to max so that it will appear transparent. This makes radio buttons unclickable

Try this http://jsfiddle.net/chintupawan/ztT5j/

Answer 2

To stop the button from also not beeing clickable you can use a div to overlay over them.

http://jsfiddle.net/heXQf/

<form>
    <div class="row">
        <div class="block"></div>           
<input type="radio" name="sex" value="male" id="rdo"/> Male<br />
<input type="radio" name="sex" value="female" id="rdo"/> Female
     </div>
</form> 

form{width:300px;position:relative;}
.block{width:100px;display:block;height:100px;position:absolute;top:0;}


    $('#rdo').click(function(e) {
    e.preventDefault();
});

Answer 3

Try this jQuery:

$('.class-of-radio-button').click(function(e) {
    e.preventDefault();
});

Fiddle: http://jsfiddle.net/c_kick/Gkp2Z/

Answer 4

try this

$("input[type!='radio'], select, textarea ").attr('disabled',true);
$("input[type='radio']").click(function(e){
     e.preventDefault();
});