How to Hide/Show Form Fields base on User input CheckBox

Question

I have two checkboxes attached to an input form.
The Forms Files are hidden at Form Load, When the user clicks the Checkbox it triggers the form field at the right-hand side in front of the Check box as shown in the attachment.

The Problem is the second does not trigger when the first is not triggered.
The second check box does not deactivate If the first is not deactivated.

Please what I'm I doing wrong?

The HTLM is below:

                            <div class="col-md-12 col-sm-12 col-xs-12">  
                                <div class="form-group-sm">  
                                    @Html.LabelFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "ORC ?", htmlAttributes: new { @class = "control-label col-md-2" })  
                                    <div class="col-md-1">  
                                        <input type="checkbox" id="trigger" name="question">  
                                    </div>  
                                     <div class="col-md-5" id="hidden_fields" name="hidden">  
                                        @Html.EditorFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, new { id = "OverridenCommissionPercentage", htmlAttributes = new { @class = "form-control input-sm", @placeholder = "Enter Overriding Commission Percentage", @type="number" } })  
                                        @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "", new { @class = "text-danger" })  
                                    </div>  
                                </div>  
                            </div>  
  
                            <div class="col-md-12 col-sm-12 col-xs-12">  
                                <div class="form-group-sm">  
                                    @Html.LabelFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "ISS Levy?", htmlAttributes: new { @class = "control-label col-md-2" })  
                                    <div class="col-md-1">  
                                        <input type="checkbox" id="issLevytrigger" name="issLevy">  
                                    </div>  
                                    <div class="col-md-5" id="issLevyHidden_fields" name="hidden">  
                                        @Html.EditorFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, new { id = "NAICOMLevyPercentage", htmlAttributes = new { @class = "form-control input-sm", @placeholder = "Enter ISS Levy Percentage", @type = "number" } })  
                                        @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "", new { @class = "text-danger" })  
                                    </div>  
                                </div>  
                            </div>  

The JS Code is pasted below:
var checkTrigger = $("#issLevytrigger")
var isshiddenField = $("#issLevyHidden_fields")
var issLevyPercentage = $("NAICOMLevyPercentage");

    var checkbox = $("#trigger");  
    var hidden = $("#hidden_fields");  
    var orcPercentage = $("OverridenCommissionPercentage");  
  
  
    // Hide the fields at FomLoad  
    hidden.hide();  
    isshiddenField.hide();  
  
    checkbox.change(function () {  
        if (checkbox.is(':checked')) {  
            hidden.show();  
        } else {  
            hidden.hide();  
            $("#OverridenCommissionPercentage").val("");  
        }  
    });  
  
         
  
    // Setup an event listener for when the state of the   
    // checkbox changes.  
    checkTrigger.change(function () {  
        if (checkbox.is(':checked')) {  
            isshiddenField.show();  
        } else {  
            isshiddenField.hide();  
            $("#NAICOMLevyPercentage").val("");  
        }  
    });  

Please how do I move the Form closer to the Check box? The space is too wide.

Thank you so much for your anticipated assistance.

The form PNG is attached

@Yihui Sun-MSFT

Answer 1

Hi @abiodunajai ,

Please what I'm I doing wrong?

First of all, the first problem is because you wrote the name of the checkbox wrong.
You need to change if (checkbox.is(':checked')) { to if (checkTrigger.is(':checked')) {.

For the second layout problem, you can change the code to the following. Use style="display:inline-block" to achieve no line break.

<div style="display:inline-block">  
                @Html.LabelFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "ORC ?", htmlAttributes: new { @style = "width:70px" })  
                <div style="display:inline-block;width:30px">  
                    <input type="checkbox" id="trigger" name="question" width="200">  
                </div>  
                <div style="display:inline-block" id="hidden_fields" name="hidden">  
                    @Html.EditorFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, new { id = "OverridenCommissionPercentage", htmlAttributes = new { @style = "width:300px" , @placeholder = "Enter Overriding Commission Percentage", @type = "number" } })  
                    @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.OverridenCommissionPercentage, "", new { @class = "text-danger" })  
                </div>  
            </div>  
        </div>  
      
        <div>  
            <div style="display:inline-block">  
                @Html.LabelFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "ISS Levy?",htmlAttributes: new { @style = "width:70px" })  
                <div style="display:inline-block;width:30px">  
                    <input type="checkbox" id="issLevytrigger" name="issLevy">  
                </div>  
                <div style="display:inline-block" id="issLevyHidden_fields" name="hidden">  
                    @Html.EditorFor(model =>model.Underwriting_PolicyFile.NAICOMLevyPercentage, new { id = "NAICOMLevyPercentage", htmlAttributes = new { @style = "width:300px" , @placeholder = "Enter ISS Levy Percentage", @type = "number" } })  
                    @Html.ValidationMessageFor(model => model.Underwriting_PolicyFile.NAICOMLevyPercentage, "", new { @class = "text-danger" })  
                </div>  
            </div>      

Best regards,
Lan Huang

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.