Hide ASP.Net RadioButtonList item using JavaScript

fp2021

SOLVED CLOSED ACTIVE ANSWERED
User: fp2021
Posted: on Dec 14, 2021 12:05 PM
Forum: JavaScript
Answer: 1
Views: 6370

I have a web form that contains two radiobuttonlist controls. I would like to hide certain radiobuttonlist list items in the 2nd radiobuttonlist whenever certain options are selected in the first radiobuttonlist.

I would like to hide the options using JavaScript.

I tried using the code below but the items were not hidden / removed.

<asp:RadioButtonList ID="rblEmpType" runat="server"   onclick="hideRoleOption()" ClientIDMode="Static" RepeatDirection="Horizontal"  >
    <asp:ListItem Value="1">Employee</asp:ListItem>
    <asp:ListItem Value="2">Manager</asp:ListItem>
</asp:RadioButtonList>
    
<asp:RadioButtonList ID="rblRole" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Value="1">Option 1</asp:ListItem>
    <asp:ListItem Value="2">Option 2</asp:ListItem>
    <asp:ListItem Value="3">Option 3</asp:ListItem>
    <asp:ListItem Value="4">Option 4</asp:ListItem>
    <asp:ListItem Value="5">Option 5</asp:ListItem>
</asp:RadioButtonList>

function hideRoleOption() {
    var selEmpOption = document.getElementById('<%= rblEmpType.ClientID %>');
    var selRoleOption = document.getElementById('<%= rblEmpRole.ClientID %>');
    if (selEmpOption[1].checked) {
        selRoleOption.getElementsByTagName('input')[0].nextSibling.style.display = 'none';
        selRoleOption.getElementsByTagName('input')[0].style.display = 'none';
    }
}

Download FREE API for Word, Excel and PDF in ASP.Net

arjunv

0 2

Reply
ANSWER
User: arjunv
Replied: on Dec 14, 2021 10:57 PM
Modified: on Dec 14, 2021 11:22 PM
Report

Hi fp2021,

Please refer below Sample.

HTML

<asp:RadioButtonList ID="rblEmpType" runat="server" onclick="hideRoleOption()" ClientIDMode="Static" RepeatDirection="Horizontal">
    <asp:ListItem Value="1">Employee</asp:ListItem>
    <asp:ListItem Value="2">Manager</asp:ListItem>
</asp:RadioButtonList>
<hr />
<asp:RadioButtonList ID="rblRole" runat="server" RepeatDirection="Horizontal">
    <asp:ListItem Value="1">Option 1</asp:ListItem>
    <asp:ListItem Value="2">Option 2</asp:ListItem>
    <asp:ListItem Value="3">Option 3</asp:ListItem>
    <asp:ListItem Value="4">Option 4</asp:ListItem>
    <asp:ListItem Value="5">Option 5</asp:ListItem>
</asp:RadioButtonList>

JavaScript

<script type="text/javascript">
    function hideRoleOption() {
        var selEmpOption = document.getElementById('<%= rblEmpType.ClientID %>');
        var radioEmpType = selEmpOption.getElementsByTagName("input");
        var selRoleOption = document.getElementById('<%= rblRole.ClientID %>');
        var radioRole = selRoleOption.getElementsByTagName("input");
        if (radioEmpType[1].checked) {
            radioRole[2].nextSibling.style.display = 'none';
            radioRole[2].style.display = 'none';
            radioRole[4].nextSibling.style.display = 'none';
            radioRole[4].style.display = 'none';
        } else {
            radioRole[2].nextSibling.style.display = 'inline';
            radioRole[2].style.display = 'inline';
            radioRole[4].nextSibling.style.display = 'inline';
            radioRole[4].style.display = 'inline';
        }
    }
</script>

Screenshot

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html

Hide ASP.Net RadioButtonList item using JavaScript

Company

Explore

Follow us

Contact Us