enable/disable radiobuttonlist with javascript

Question

I am trying to enable/disable radiobuttonlist with javascript code. This javascript is working fine with textboxes but it looks like that it doesn't work with radiobuttonlist. Here is the code I am using:

 var chkEPM = document.getElementById("<%=chkEPM.ClientID %>");
        chkEPM.onchange = function () {
            if (this.checked == true)
                document.getElementById("<%=rblEPM.ClientID %>").disabled = false;
            else
                document.getElementById("<%=rblEPM.ClientID %>").disabled = true;
        };

Thanks in advance for each reply and have a good day/night

kevev22 · Accepted Answer · 2011-11-10T15:21:59.283

3

You can try this:

function changeItemState(disable)
{
    rb = document.getElementById("<%=rblEPM.ClientID %>");

    var rbItems = rb.getElementsByTagName('input');

    for (var itemIndex = 0; itemIndex < rbItems.length; itemIndex++) 
    {
        rbItems[itemIndex].disabled = disable;
    }
}

var chkEPM = document.getElementById("<%=chkEPM.ClientID %>");
chkEPM.onchange = function () {
    if (this.checked == true)
        changeItemState(false);
    else
        changeItemState(true);
};

Or if you can use jquery 1.6 or greater you could do:

$("#<%=rblEPM.ClientID %>").find('input').prop('disabled', 'true');

edited Nov 10 '11 at 15:21

answered Nov 09 '11 at 23:33

kevev22

3,737
21
32

is there a way how can I utilize that for multiple radiobuttonlists, I can see that the elementID is hardcoded in the function? – Laziale Nov 09 '11 at 23:50
never mind, I figured that out, I am passing the var 'chkEPM' in this case to the function and use that there :). Thanks again – Laziale Nov 09 '11 at 23:52
I had no problem disabling it from `rblEPM` control directly. I wonder what the problem was that needed it to be done to each child control. Any idea? – Nick Rolando Nov 10 '11 at 00:11
1

@Shredder - Actually it looks like disabling the rblEPM control directly should not work. ASP.NET renders the RadioButtonList as an HTML table If you look [here](http://www.w3schools.com/tags/tag_table.asp), table elements do not have a disabled attribute. It works in IE but I just tried Chrome and it doesn't work. – kevev22 Nov 10 '11 at 15:25
@kevev22 Ah, I was doing it in IE. I'll mess around with it when I get to work. Thx – Nick Rolando Nov 10 '11 at 16:00

score 1 · Answer 2 · edited Apr 07 '16 at 13:17

1

 function EnableDisableRadio(CheckBox1) {
            var controls = document.getElementById("<%=Panel1.ClientID%>").getElementsByTagName("input");
            for (var i = 0; i < controls.length; i++)
                controls[i].disabled = CheckBox1.checked ? false : true;
        }

edited Apr 07 '16 at 13:17

Mogsdad

44,709
21
151
275

answered Apr 07 '16 at 13:02

Suraj

51
4

It would be helpful to include some explanation about why this "work 100%", as in [this answer](http://stackoverflow.com/a/6908533/1677912). – Mogsdad Apr 07 '16 at 13:20

score 1 · Answer 3 · answered Nov 09 '11 at 23:05

1

Try something like

document.getElementById('rbl').setAttribute('disabled', 'disabled');

rbl being the ID of your radiobuttonlist.

answered Nov 09 '11 at 23:05

Nick Rolando

25,879
13
79
119

@Laziale then maybe you should check that `document.getElementById('radiobtnListID')` is actually returning the DOM object. You can use javascript debugging tools like Firebug. – Nick Rolando Nov 09 '11 at 23:13
I am getting this error when I am using IE debugging tool: "Unable to get value of the property 'setAttribute': object is null" – Laziale Nov 09 '11 at 23:17
@Laziale Could you show all the code that relates to this? Including the asp.net/html markup. – Nick Rolando Nov 09 '11 at 23:19
@Laziale sounds like you're trying to use it as a variable, not a function. – Nick Rolando Nov 09 '11 at 23:25
Shredder's code, and yours as well, is correct. There is a good chance that the browser you are using is so old that it does not support the 'disabled' attribute for table elements – rkw Nov 09 '11 at 23:39
@rkw I am using firefox, and it was updated this morning with the latest version :) – Laziale Nov 10 '11 at 00:11
As I stated in the comments to my own answer, the RadioButtonList is output as an HTML table which [does not officially have a disabled attribute](http://www.w3schools.com/tags/tag_table.asp). If you set the RadioButtonList as Enabled="false" server side you will see that ASP.NET will set each of the individual Radio Buttons as disabled. For some reason in IE you can set the table as disabled, but I just tried it in Chrome and it does not work either. – kevev22 Nov 10 '11 at 15:27

score 0 · Answer 4 · edited Dec 26 '13 at 13:10

0

For cross platform support u need to use something like this one:

$('#RadioButtonList1').find('*').each(function () 
{ 
    $(this).attr("disabled", true); 
});

edited Dec 26 '13 at 13:10

DontVoteMeDown

21,122
10
69
105

answered Dec 26 '13 at 11:39

Unkown

31
4

There is no jQuery tag in the question. – Andrew Barber Dec 27 '13 at 01:52

enable/disable radiobuttonlist with javascript

4 Answers4