DropDownList client-side change event in Repeater

Question

I have a repeater

 <asp:Repeater ID = "rpQuestion8" runat = "server" >
                    <ItemTemplate>
                        <tr>
                            <td>
                                <asp:DropDownList ID = "ddCounty" runat = "server" AutoPostBack="true" />
                                <input type = "hidden" id = "hidSurveyCustomerAreaID" runat = "server" value = '<%#showData(Container.DataItem, "SurveyCustomerAreaID")%>' />
                            </td>
                              <td>
                                <asp:radiobutton id = "radStillStandHuntMethod" text = "Still/Stand" runat = "server" GroupName = "Question8HuntMethod"/>
                                &nbsp;&nbsp;&nbsp;
                                <asp:radiobutton id = "radDogHuntMethod" text = "Dog" runat = "server" GroupName = "Question8HuntMethod"/>
                            </td>
                            <td>
                                <asp:TextBox ID = "txtDaysHunted" runat = "server" Width = "50" text  = '<%#showData(Container.DataItem, "DaysHunted")%>'/>
                                <asp:CompareValidator ID = "cvNumDays" runat = "server" ControlToValidate = "txtDaysHunted" Operator = "DataTypeCheck" Type = "Integer" Text = "*" ErrorMessage = "Please enter a whole number for Days Hunted." />
                            </td>
                            <td>
                                <asp:radiobutton id = "radYesUnprocessedFood" text = "Yes" runat = "server" GroupName = "Question8UnprocessedFood" />
                                &nbsp;&nbsp;&nbsp;
                                <asp:radiobutton id = "radNoUnprocessedFood" text = "No" runat = "server" GroupName = "Question8UnprocessedFood" />
                            </td>
                            <td>
                                <asp:TextBox ID = "txtNumSeen" runat = "server" Width = "50"  text  = '<%#showData(Container.DataItem, "NumberSeen")%>' />
                                <asp:CompareValidator ID = "cvBearsSeen" runat = "server" ControlToValidate = "txtNumSeen" Operator = "DataTypeCheck" Type = "Integer" Text = "*" ErrorMessage = "Please enter a whole number for Number of Bears Seen." />
                            </td>
                            <td>
                                <asp:radiobutton id = "radYes" text = "Yes" runat = "server" GroupName = "Question8Harvest" />
                                &nbsp;&nbsp;&nbsp;
                                <asp:radiobutton id = "radNo" text = "No" runat = "server" GroupName = "Question8Harvest" />
                            </td>
                        </tr>
                    </ItemTemplate>
                </asp:Repeater>

what I want to achieve is: whenever ddCounty.selectedValue =="" than disable all the fields in the same row/item. Otherwise enable the fields in the same item or rows.

I tried this code bellow, but It never fires

  Private Sub ddCounty_SelectedIndexChanged(sender As Object, e As System.EventArgs) Handles ddCounty.SelectedIndexChanged
        Dim ddCounty As DropDownList = CType(sender, DropDownList)
        Dim Item As RepeaterItem = CType(ddCounty.NamingContainer, RepeaterItem)
        Dim txtNumDays As TextBox = CType(Item.FindControl("txtDaysHunted"), TextBox)

        If ddCounty.SelectedValue = "" Then
            txtNumDays.Enabled = False
        Else
            txtNumDays.Enabled = True
        End If
    End Sub

Also, I am not sure how to achieve this with JavaScript. Thanks in advance!

Answer 1

If you just want to disable controls at client-side, you do not need to call SelectedIndexChanged server side event.

You could easily achieve at client-side using JavaScript.

<asp:DropDownList ID="ddCounty" runat="server" onchange="ddCountyChange(this);" />

Place this script at the button of Repeater control. It will basically disable sibling input controls if selected value is "".

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    function ddCountyChange(sender) {
        if (sender.value === "") {
            $(sender).parent().siblings().find("input").attr("disabled", "disabled");
        } else {
            $(sender).parent().siblings().find("input").removeAttr('disabled');
        }
    }
</script>