13

I know we can't make readonly radio button and checkbox. I tried to disable radio button and checkbox but in IE it is not visible.

Is any alternative way to do the same like disabled / readonly using jQuery, CSS, JavaScript?

A. Gladkiy
  • 3,134
  • 5
  • 38
  • 82
Raje
  • 3,285
  • 15
  • 50
  • 70
  • Yes, but it does exactly the same as what you've already tried, sets the disabled property to disabled etc. – adeneo May 14 '12 at 12:32
  • what code you are doing for that.. – Javascript Coder May 14 '12 at 12:34
  • Check the accepted answer on this question: https://stackoverflow.com/questions/1953017/why-cant-radio-buttons-be-readonly It does an excellent job making radio buttons effectively readonly. – mcv Nov 26 '20 at 09:38

4 Answers4

19

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.

LoneWOLFs
  • 2,306
  • 3
  • 20
  • 38
  • thanks it works. Is it possible to apply background color to radiobuttton and checkbox, so that it looks like disabled without using image? I tried using $(':radio,:checkbox').css("background-color", 'red"); – Raje May 15 '12 at 04:42
  • I don't think you can do that. You have to use some sort of image for that purpose. But if you want to give it a disabled effect its better to disable it; then it will look consistent on all browsers. I thought u want to disable a checkbox/radio button without the disable effect. – LoneWOLFs May 15 '12 at 05:06
  • Yes, you are right. I want disable like functionality without disable effect. If I specified disabled to checkbox and radio button it is not clearly visiable in IE. – Raje May 15 '12 at 10:49
  • 2
    This has an unfortunate side effect in IE (tested 9/10/11): if you click on non-checked button, the checked one gets visually "de-checked". – Georgii Ivankin Dec 02 '15 at 13:39
8

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);
A. Gladkiy
  • 3,134
  • 5
  • 38
  • 82
Javascript Coder
  • 5,691
  • 8
  • 52
  • 98
  • 2
    I know this is old, but for anyone who is tempted to use this solution, keep in mind that disabled elements will not be posted when a form is submitted. – blackandorangecat Oct 24 '17 at 21:31
4
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.

Mehul Kabaria
  • 6,404
  • 4
  • 25
  • 50
driven4ward
  • 83
  • 1
  • 6
1

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;
    });
});
Raje
  • 3,285
  • 15
  • 50
  • 70