Gray out one radiobutton based on status of another

Question

I want the "that" button to be disabled unless "this" is clicked.

But I'm getting a javascript error wherein it "cannot read the property of a null" when checking the "checked" quality of "this". Am I not referring to it the right way?

<asp:Content ID="Content2" runat="server">
        <div><asp:RadioButton ID="this" /></div>
        <div><asp:RadioButton ID="that" /></div>

 <script type="text/javascript">
    $(document).ready(function () 
    {
       if (document.getElementById("this").checked == false
        {
            document.getElementById("that").disabled = true;
        } 
        
    });
  </script>
</asp:Content>

score 1 · Accepted Answer · answered Sep 23 '21 at 18:44

The ids of asp.net are change on render. Get the rendered id by using the .ClientID if the control. Your code will be like:

 <script type="text/javascript">
    $(document).ready(function () 
    {
       if (document.getElementById("<%=this.ClientID%>").checked == false
        {
            document.getElementById(""<%=that.ClientID%>"").disabled = true;
        } 
        
    });
  </script>

If you see the rendered html of the page by right click on page and view the page source will understand the issue here.

Gray out one radiobutton based on status of another

1 Answers1