jqueryasp.net-mvcasp.net-corerazorradiobuttonlist

Generic event for all the Radiobuttonlist event in jquery


I have an MVC application form with multiple razor controls one of them being radiobuttonlist. This control is similar to Yes/No questions with additional details (textarea) in case of Yes.

Initially all the textareas are hidden through a common class(applicant__additional-details) applied to it. I need to write a generic event for all the radiobutton list event which when Checked Yes will open the text area to input the additional details. I can easily write the change event for every radiobuttonlist but the issue with that approach is that the form has more than 15+ Yes/No questions & so is the need to write a generic radiobuttonlist event that when clicked will open up the closest div(applicant__additional-details). Below is an example of 1 of the radiobuttonlist question with additional-details textarea.

<div class="row">
    <div class="col-sm-9">
        <legend class="applicant__question">
             Have you operated under a different DOT# in the past 5 years
        </legend>
    </div>
    <div class="col-sm-3">
        <div class="custom-control">
            @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, true, new { id = "HasOperatedUnderDifferentDotNumberYes" })
            <label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
        </div>
        <div class="custom-control">
            @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, false, new { id = "HasOperatedUnderDifferentDotNumberNo" })
            <label for="HasOperatedUnderDifferentDotNumberNo">No</label>
        </div>
            @Html.ValidationMessageFor(model => model.HasOperatedUnderDifferentDotNumber, "", new { @class = "text-danger" })
    <div class="applicant__additional-details row">
            <label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
            @Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
            @Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, "", new { @class = "text-danger" })
    </div>
    </div>
</div>

Any suggestion for the above will be helpful. Regards.


Solution

  • Here is a demo:

    Model class:

            public int HasOperatedUnderDifferentDotNumber { get; set; }
            public string OperatedUnderDifferentDotNumberAdditionalDetail { get; set; }
            public int HasOperatedUnderDifferentDotNumber1 { get; set; }
            public string OperatedUnderDifferentDotNumberAdditionalDetail1 { get; set; }
    

    View:

    <div class="row">
        <div class="col-sm-9">
            <legend class="applicant__question">
                Question1:Have you operated under a different DOT# in the past 5 years
            </legend>
        </div>
        <div class="col-sm-3">
            <div class="custom-control">
                @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, true, new { id = "HasOperatedUnderDifferentDotNumberYes"})
                <label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
            </div>
            <div class="custom-control">
                @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber, false, new { id = "HasOperatedUnderDifferentDotNumberNo" })
                <label for="HasOperatedUnderDifferentDotNumberNo">No</label>
            </div>
    
            <div class="applicant__additional-details row" hidden>
                <label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
                @Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
                @Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail, "", new { @class = "text-danger" })
            </div>
        </div>
      
    </div>
    <div class="row">
        <div class="col-sm-9">
            <legend class="applicant__question">
                Question2:Have you operated under a different DOT# in the past 5 years
            </legend>
        </div>
        <div class="col-sm-3">
            <div class="custom-control">
                @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber1, true, new { id = "HasOperatedUnderDifferentDotNumberYes1" })
                <label for="HasOperatedUnderDifferentDotNumberYes">Yes</label>
            </div>
            <div class="custom-control">
                @Html.RadioButtonFor(model => model.HasOperatedUnderDifferentDotNumber1, false, new { id = "HasOperatedUnderDifferentDotNumberNo1" })
                <label for="HasOperatedUnderDifferentDotNumberNo">No</label>
            </div>
    
            <div class="applicant__additional-details row" hidden>
                <label for="OperatedUnderDifferentDotNumberAdditionalDetail">Additional Details</label>
                @Html.TextAreaFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail1, new { rows = 3, @class = "form-control", required = "required", placeholder = "Dot Number Additional Detail" })
                @Html.ValidationMessageFor(model => model.OperatedUnderDifferentDotNumberAdditionalDetail1, "", new { @class = "text-danger" })
            </div>
        </div>
     </div>
    

    jquery:

    $('input[type=radio]').change(function () {
                    if ($(this).is(":checked") == true && $(this).val() == "True") {
                        $(this).closest("div").nextAll('div.applicant__additional-details').removeAttr("hidden");
                    } else {
                        $(this).closest("div").nextAll('div.applicant__additional-details').attr("hidden", true);
                    }
                });
    

    result: enter image description here