ASP.NET: Yes/No Radio Buttons, If Yes, enable TextBox?

Question

I searched around a few different places for an answer and checked topics like this, but was not able to find an applicable answer.

I'm creating a web application for a paper form (much like the user in the link I posted). However, unlike that user I'm NOT using an update panel for the display. His post wasn't descriptive enough for me to figure out how to replicate what he had done to get it working.

All I want to do is have an asp RadioButtonList; when "Yes" is checked, enable "Reported Date" (see below for how it looks currently on the form); "Else" disable it.

   <div class="col-xs-6 text-right">
                        <b>Reported to a Supervisor?</b><br>
                    </div>
                    <asp:RadioButtonList ID="RadioButtonList_ReportedToSupervisor" runat="server"
                        RepeatDirection="Horizontal">
                        <asp:ListItem Text="Yes" Value="1"></asp:ListItem>
                        <asp:ListItem Text="No" Value="0"></asp:ListItem>
                    </asp:RadioButtonList>
                    <br>
                    <div class="col-xs-6 text-right">
                        <b>Reported Date:</b><br>
                    </div>
                    <div class="col-xs-6">
                        <asp:TextBox
                            runat="server"
                            ID="TextBox_ReportedDate"
                            class="form-control"
                            style="max-width:125px" />
                        <asp:RegularExpressionValidator
                            ID="RegularExpressionValidator_ReportedDate"
                            runat="server"
                            ControlToValidate="TextBox_ReportedDate"
                            ErrorMessage="Invalid date"
                            ValidationExpression="^^((0[1-9])|(1[0-2]))\/((0[1-9])|(1[0-9])|(2[0-9])|(3[0-1]))\/(\d{4})$"
                            Display="Dynamic"
                            SetFocusOnError="True"
                            Font-Bold="true"
                            ForeColor="red" />
                        <ajaxToolkit:MaskedEditExtender ID="maskededitextender_ReportedDate" runat="server" TargetControlID="TextBox_ReportedDate" Mask="99/99/9999" MaskType="Date" AcceptNegative="None" />
                    </div>

I'm very new to building web applications so I apologize if this is a relatively dumb question. I am not familiar enough with the common ASP.NET controls in order to figure this out myself.

Thank you very much!

score 0 · Answer 1 · answered Apr 13 '16 at 20:33

Set the OnTextChanged property of your RadioButtonList to the name of a method (which you will create) and the AutoPostBack property to true. Set the Enabled property of your TextBox to false. Then, in the method you create. Set the TextBox to enabled:

protected void EnableTextBox(object sender, EventArgs e)
    {
                        TextBox_ReportedDate.Disabled = false;      }

Or, you can do this in javascript. In the PageLoad() method, set the onchange property of the RadioButtonList to a javascript function you'll write:

RadioButtonList_ReportedToSupervisor.Add("onchange", "EnableTextBox('" + TextBox_ReportedDate.ClientID + "');");

Then add this javascript function to your aspx page:

<script language="javascript" type="text/javascript">
function EnableTextBox(RBLID)
{
    var textbox = document.getElementById(RBLID);
    textbox.disabled = false;
}

saifiqbal · Answer 2 · 2016-04-14T05:13:37.110

0

Try this one.

$('#RadioButtonList_ReportedToSupervisor input').change(function () {
 var selectedvalue = $(this).val();
 if (selectedvalue === "1")
 {
     $("#TextBox_ReportedDate").attr('disabled', 'disabled');

 }
 else if (selectedvalue === "0") {
     $("#TextBox_ReportedDate").removeAttr('disabled');
 }
});

edited Apr 14 '16 at 05:13

answered Apr 13 '16 at 20:38

saifiqbal

199
7

It works but you show/hide the TextBox instead of enabling/disabling it (See: http://stackoverflow.com/questions/1414365/disable-enable-an-input-with-jquery ). – ConnorsFan Apr 13 '16 at 22:46

score 0 · Answer 3 · answered Apr 14 '16 at 05:26

try this:

 $("input[name=toggle]").on('click', function() { var checked = $("input[name=toggle]").prop('checked');
console.log(checked);
   if(checked) { $("#yourbtnId").show();  } 
   else { $("#yourbtnId").hide(); }
                                                 });

<input type="radio" name="toggle" value="1">Toggle

ASP.NET: Yes/No Radio Buttons, If Yes, enable TextBox?

3 Answers3