Question

I am building some functionality similar to a survey in a web application where the user is presented with a list of questions to read over. There is a link at the bottom of the questions to answer the questions. When the user clicks the link to answer the questions they are presented with a Modal PopUp window that has a repeater built in. The repeater displays the question, as well as a radio button list as possible answers. Each answer must have justification so there is a justification box next to the answers. If a user selects the answer “Below” (value is a B) then a textbox needs to appear for the user to put in their corrective action/preventative measures. I have all of this functionality working right now, except when a user selects “Below”, all of the corrective boxes appear throughout the repeater, instead of in the respected repeater row. How can I accomplish only having the textbox show on the row of the “Below” answer?

Code snips:

<script type="text/javascript">
$(document).ready(function () {
    $("input:radio").change(function (eventObject) {
        var type = $.trim($(this).val());
        if (type == "B") {
            alert("Clicked"); //Testing...
            $('.tblPreventative').show();
        }
        else
            $('.tblPreventative').hide();
    });

});

<asp:Repeater runat="server" ID="rptQuestions">
        <ItemTemplate>
            <div class="AnswerSection">
                <div class="question">
                <asp:Label runat="server" ID="lblQuestId" Text='<%#Eval("guidQuestionId")%>' Visible="false" />
                    <%#Eval("strQuestion")%>
                </div>
                <div class="answer">
                <table width="100%">
                    <tr>
                        <td width="10%">
                            <asp:RadioButtonList runat="server" ID="rbAnswer">
                                <asp:ListItem Text="Meets" Value="M" />
                                <asp:ListItem Text="Above" Value="A" />
                                <asp:ListItem Text="Below" Value="B" />
                                <asp:ListItem Text="N/A" Value="N" />
                            </asp:RadioButtonList>
                            <asp:RequiredFieldValidator ID="rqfvRBAnswer" runat="server" ControlToValidate="rbAnswer" ErrorMessage="You must select an Assessment." ForeColor="Red" />
                        </td>
                        <td valign="top" width="90%" style="padding-right:5px">
                            <strong>Justification</strong>
                            <br />
                            <asp:TextBox ID="txtJustification" runat="server" TextMode="MultiLine" Width="100%" Height="70px" />
                            <asp:RequiredFieldValidator ID="rqfvJustification" runat="server" ControlToValidate="txtJustification" ErrorMessage="Please input a justification." ForeColor="Red" />
                        </td>
                    </tr>
                    <tbody class="tblPreventative" style="display:none;">
                    <tr>
                         <td width="10%">
                         </td>
                         <td valign="top" width="90%" style="padding-right:5px">
                         <strong>Corrective Action</strong>
                            <br />
                            <asp:TextBox ID="txtPreventative" runat="server" TextMode="MultiLine" Width="100%" Height="70px"/>
                         </td>
                    </tr>
                    </tbody>
                </table>

                </div>
            </div>
            <br />
        </ItemTemplate>
    </asp:Repeater>

Answer 1

Try this script:

$(document).ready(function () {
     $("input:radio").change(function (eventObject) {
          var type = $.trim($(this).val());
          if (type == "B") {
               alert("Clicked"); //Testing...
               $(this).closest("tr").next("tbody").show();
          }
          else
               $(this).closest("tr").next("tbody").hide();
     });

});