Search code examples
javascriptjqueryasp.netcssradiobuttonlist

How to switch css property according to some condition


I have the following radiobutton list :

<asp:Panel ID="pnl_select_sign" runat="server" Visible="false" Style="text-align: right">
        <asp:RadioButtonList ID="rb_select_sign" runat="server" AutoPostBack="true" RepeatDirection="Horizontal"
            OnSelectedIndexChanged="rb_select_sign_SelectedIndexChanged" CausesValidation="false"
            AppendDataBoundItems="true">
            <asp:ListItem Selected="True" Value="0">Normal</asp:ListItem>
            <asp:ListItem Value="1">Electronic</asp:ListItem>
        </asp:RadioButtonList>
    </asp:Panel>

I want to change the css property overflow-y

from overflow-y :auto; to overflow-y :hidden;

For the div with id = wrap_form

if the I select the ListItem with Value = 1;


From FireBug :

<td>
<input id="ctl00_ContentPlaceHolder1_rb_select_sign_0" type="radio" onclick="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$rb_select_sign$0\',\'\')', 0)" value="0" name="ctl00$ContentPlaceHolder1$rb_select_sign">
<label for="ctl00_ContentPlaceHolder1_rb_select_sign_0">Normal</label>
</td>
<td>
<input id="ctl00_ContentPlaceHolder1_rb_select_sign_1" type="radio" checked="checked" value="1" name="ctl00$ContentPlaceHolder1$rb_select_sign">
<label for="ctl00_ContentPlaceHolder1_rb_select_sign_1">Electronic</label>
</td>

Solution

  • Note that if You use the suggested javascript answers, the css will go back to normal after page postback. You already use a postback on Your RadioButtonList, so I suppose You can just change the style server-side instead.

    Update

    Put this in Your method handling item selection change in the list:

    protected void rb_select_sign_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (rb_select_sign.SelectedValue == "1")
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(), "styleChangeScript", "<script type='text/javascript'>var divToChange = document.getElementById('wrap_form'); if(divToChange) { divToChange.style.overflowY = 'hidden' }</script>", false);
        }
        //the rest of the original code of this method should be here
        //...
    }
    

    To make it work when clicking other buttons etc. causing postbacks, You should place the same code lines in the Page_Load event of Your page (or just put it in a separate method and call it from both places).