Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET : The Official Microsoft ASP.NET Forums

Reply

Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET

May 04, 2012 06:44 AM|LINK

Hi I need help with enabling /disabling RadiobuttonList from Client Side

My form looks like this:

RadioButtonLists

What I want is by default Yes-Options RadioButtonlist and No-Options Radiobuttonlist shoulsd be disbaled. When user selects YES, YES-Options Radiobutton list shouls get enabled and NO-Options radiobutton list should get disbaled In the same way when selected NO, NO-Options radiobuttonlist should get enabled and YES-Options radiobutton list shouls be disabled.
When clicked Save button on bottom, validation should happen. User should select YES or NO from radiobutton list which is on top and then a value should be selected from it's corresponding options. ( When Yes is selected, a value should be selected from YES--Options and Viceversa)

How can I do this ??

Below is my markup

<asp:RadioButtonList ID="rbtnMain" runat="server">
<asp:ListItem Text="YES" Value="1"></asp:ListItem>
<asp:ListItem Text="NO" Value="0"></asp:ListItem>
</asp:RadioButtonList>
<br /><br />

YES -- Options
<asp:RadioButtonList ID="rbtnMainYes" runat="server">
<asp:ListItem Text="Options Yes -1" Value="1"></asp:ListItem>
<asp:ListItem Text="Options Yes -2" Value="2"></asp:ListItem>
<asp:ListItem Text="Options Yes -3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br /><br />
NO -- Options
<asp:RadioButtonList ID="rbtnMainNo" runat="server">
<asp:ListItem Text="Options No -1" Value="1"></asp:ListItem>
<asp:ListItem Text="Options No -2" Value="2"></asp:ListItem>
<asp:ListItem Text="Options No -3" Value="3"></asp:ListItem>
</asp:RadioButtonList>

<br /><br />
<asp:Button ID="btnSave" runat="server" Text="Save" />

How can I do this from Clientside ?

Reply

Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET

May 04, 2012 07:29 AM|LINK

Hi,

Try this-

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("table[id$=rbtnMain] input:first").attr("checked", true);
        $("table[id$=rbtnMainNo]").attr("disabled", true);
        $("input[name$=rbtnMain]").click(function () {
            if ($(this).val() == 0) {
                $("table[id$=rbtnMainNo]").attr("disabled", false);
                $("table[id$=rbtnMainYes]").attr("disabled", true);
                $("table[id$=rbtnMainYes] input").removeAttr("checked");
            }
            else if ($(this).val() == 1) {
                $("table[id$=rbtnMainNo]").attr("disabled", true);
                $("table[id$=rbtnMainYes]").attr("disabled", false);
                $("table[id$=rbtnMainNo] input").removeAttr("checked");
            }
        });
        $("#btnSave").click(function () {
           
            if ($("table[id$=rbtnMainYes]").attr("disabled") != "disabled") {
                alert("Select an yes option");
                return false;
            }
            else if ($("table[id$=rbtnMainNo]").attr("disabled") != "disabled") {
                alert("Select an no option");
                return false;
            }

        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:RadioButtonList ID="rbtnMain" runat="server"><asp:ListItem Text="YES" Value="1"></asp:ListItem><asp:ListItem Text="NO" Value="0"></asp:ListItem></asp:RadioButtonList><br /><br />
    <span>YES -- Options</span>
    <asp:RadioButtonList ID="rbtnMainYes" runat="server">
    <asp:ListItem Text="Options Yes -1" Value="1"></asp:ListItem>
    <asp:ListItem Text="Options Yes -2" Value="2"></asp:ListItem>
    <asp:ListItem Text="Options Yes -3" Value="3"></asp:ListItem>
    </asp:RadioButtonList>
    <br /><br />
    <span>NO -- Options</span>
    <asp:RadioButtonList ID="rbtnMainNo" runat="server">
    <asp:ListItem Text="Options No -1" Value="1"></asp:ListItem>
    <asp:ListItem Text="Options No -2" Value="2"></asp:ListItem>
    <asp:ListItem Text="Options No -3" Value="3"></asp:ListItem>
    </asp:RadioButtonList>

    <br /><br />
    <asp:Button ID="btnSave" runat="server" Text="Save" />
    </form>
</body>
</html>

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Marked as answer by Song-Tian - MSFT on May 14, 2012 06:34 AM

Reply

Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET

May 04, 2012 08:48 AM|LINK

Hi,

I wrote this code its woking fine with enabling the radio buttonlist but has some issue in disable.

The disable woks fine if ter is only radiobutton.

<head runat="server">
    <title></title>

    <script type="text/ecmascript" language="javascript">
    function rblSelectedValue(rbl,rblY,rblN) {
        var txt, rdO;
        rdO = document.getElementsByName(rbl);
        //alert(rdO.length);
        for (var i = 0; i < rdO.length; i++) {
            if (rdO[i].checked) {
                txt = rdO[i].parentNode.getElementsByTagName('label')[0].innerHTML;
            }
        }
        if (txt == "YES") {
            EnableChild(document.getElementById(rblY));
           // DisableChild(document.getElementById(rblN));
        }
        else {
            EnableChild(document.getElementById(rblN));
     // DisableChild(document.getElementById(rblY));
        }
    }
    function EnableChild(control) {
        var children = control.childNodes;
        try { control.removeAttribute('disabled') }
        catch (ex) { }
        for (var j = 0; j < children.length; j++) {
            EnableChild(children[j]);
        }
    }

//    function DisableChild(control1) {
//        var children1 = control1.childNodes;
//
//        try {children1.attr("disabled", true); }
//        catch (ex) { }
//        for (var j = 0; j < children1.length; j++) {
//            DisableChild(children1[j]);
//        }
//    }

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:RadioButtonList ID="rbtnMain" runat="server" OnClick="rblSelectedValue('rbtnMain','rbtnMainYes','rbtnMainNo')">
            <asp:ListItem Text="YES" Value="1"></asp:ListItem>
            <asp:ListItem Text="NO" Value="0"></asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <br />

        YES -- Options
<asp:RadioButtonList ID="rbtnMainYes" runat="server" Enabled="false" >
<asp:ListItem Text="Options Yes -1" Value="1"></asp:ListItem>
<asp:ListItem Text="Options Yes -2" Value="2"></asp:ListItem>
<asp:ListItem Text="Options Yes -3" Value="3"></asp:ListItem>
</asp:RadioButtonList>
<br /><br />
NO -- Options
<asp:RadioButtonList ID="rbtnMainNo" runat="server" Enabled="false">
<asp:ListItem Text="Options No -1" Value="1"></asp:ListItem>
<asp:ListItem Text="Options No -2" Value="2"></asp:ListItem>
<asp:ListItem Text="Options No -3" Value="3"></asp:ListItem>
</asp:RadioButtonList>

<br /><br />
<asp:Button ID="btnSave" runat="server" Text="Save" />

    </div>
    </form>
</body>
</html>

Please: Don't forget to click "Mark as Answer" on the post that helped you. That way future readers will know which post solved your issue.

Keep Smiling :)

Thanks,
Shari

Reply

tusharrs

Contributor

3230 Points

668 Posts

Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET

May 04, 2012 09:14 AM|LINK

// function to check if radio buttons are clicked
function validaterb() {

            if (sel == "0") {
                alert("select yes or no");
            }
            return true;
        }

// function to enable or diable radio buttons
function endi() {

            if (document.getElementById('rbtnMain_0') != null) {
                if (document.getElementById('rbtnMain_0').checked) {
                    document.getElementById('rbtnMainYes_0').disabled = false;
                    document.getElementById('rbtnMainYes_1').disabled = false;
                    document.getElementById('rbtnMainYes_2').disabled = false;
                    if (! document.getElementById('rbtnMainNo_0').disabled) {
                        document.getElementById('rbtnMainNo_0').disabled = !document.getElementById('rbtnMainNo_0').disabled;
                        document.getElementById('rbtnMainNo_1').disabled = !document.getElementById('rbtnMainNo_1').disabled;
                        document.getElementById('rbtnMainNo_2').disabled = !document.getElementById('rbtnMainNo_2').disabled;
                        document.getElementById('rbtnMainNo_0').checked = false;
                        document.getElementById('rbtnMainNo_1').checked = false;
                        document.getElementById('rbtnMainNo_2').checked = false;
                    }
                }
                else {

}
}

            if (document.getElementById('rbtnMain_1') != null) {
                if (document.getElementById('rbtnMain_1').checked) {
                    document.getElementById('rbtnMainNo_0').disabled = false;
                    document.getElementById('rbtnMainNo_1').disabled = false;
                    document.getElementById('rbtnMainNo_2').disabled = false;
                    if (! document.getElementById('rbtnMainNo_0').disabled) {
                    document.getElementById('rbtnMainYes_0').disabled = !document.getElementById('rbtnMainYes_0').disabled;
                    document.getElementById('rbtnMainYes_1').disabled = !document.getElementById('rbtnMainYes_1').disabled;
                    document.getElementById('rbtnMainYes_2').disabled = !document.getElementById('rbtnMainYes_2').disabled;
                    document.getElementById('rbtnMainYes_0').checked = false;
                    document.getElementById('rbtnMainYes_1').checked = false;
                    document.getElementById('rbtnMainYes_2').checked = false;
                    }

                }
            }
        }
    </script>

radiobuttonlist has some changes

<div>
        <asp:RadioButtonList ID="rbtnMain" runat="server" onchange="endi()">

            <asp:ListItem Text="YES" Value="1"></asp:ListItem>
            <asp:ListItem Text="NO" Value="0"></asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <br />
        <asp:RadioButtonList ID="rbtnMainYes" runat="server">
            <asp:ListItem Text="Options Yes -1" Value="1" Enabled="false"></asp:ListItem>
            <asp:ListItem Text="Options Yes -2" Value="2" Enabled="false"></asp:ListItem>
            <asp:ListItem Text="Options Yes -3" Value="3" Enabled="false"></asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <br />
        <asp:RadioButtonList ID="rbtnMainNo" runat="server">
            <asp:ListItem Text="Options No -1" Value="1" Enabled="false"></asp:ListItem>
            <asp:ListItem Text="Options No -2" Value="2" Enabled="false"></asp:ListItem>
            <asp:ListItem Text="Options No -3" Value="3" Enabled="false"></asp:ListItem>
        </asp:RadioButtonList>
        <br />
        <br />
        <asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return validaterb()" />
    </div>

Regards

( Mark as Answer if it helps you out )

View my Blog

Edited by tusharrs on May 04, 2012 09:16 AM
Edited by tusharrs on May 04, 2012 09:16 AM

Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET RSS

3 replies

sbmdude

Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET

asteranup

Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET

shari.aravin...

Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET

tusharrs

Re: Enable Disable RadioButtonList with another RadiobButtonList Selection ASP.NET

This site is managed for Microsoft by Neudesic, LLC. | © 2013 Microsoft. All rights reserved.

Follow Us On:

Microsoft