Hide Textbox with parameter name completely when the checkbox is disabled in UI

Question

When I enable the checkbox, I've written a js function to enable the textbox to be adjustable; otherwise, it must be greyed out.

Changes Made:

When I enable the checkbox, I've written a js function to enable the textbox to be adjustable; otherwise, it must be in a greyed out mode.

Achieved the following logic using JS changes.

Expectation to implement:

However, I want the text box along with the parameter to be hidden if I don't enable the check box. How to modify the display_ReadOnly function to achieve that hiding functionality.Could someone please guide me on this?

jsp file changes:

<table>
                                               <tr>
                                                <th>
                                                  <b>InputSourceBackup</b>
                                                </th>
                                                <td>
                                                 <c:choose>
                                                   <c:when test="${isAddOperation and DefinitionForm.currentEntry.srcBackupInputs eq true}" >
                                                           <input type="checkbox" name="currentEntry.srcBackupInputs" value="${DefinitionForm.currentEntry.srcBackupInputs}"
                                                         checked="checked" onclick="proj_toggle('srcBackupInputs')"/>
                                                         </c:when>
                                                         <c:when test="${isAddOperation}" >
                                                           <input type="checkbox" name="currentEntry.srcBackupInputs" value="${DefinitionForm.currentEntry.srcBackupInputs}"
                                                        onclick="proj_toggle('srcBackupInputs')"/>
                                                         </c:when>
                                                         <c:otherwise>
                                                                <c:out value="${DefinitionForm.currentEntry.srcBackupInputs eq true ? 'Yes' : 'No'}"/>
                                                         </c:otherwise>
                                                       </c:choose>
                                                </td>
                                              </tr>
                                              <tr>
                                                    <th>Backup Source IP Address 1 (optional)</th>
                                                    <td>
                                                      <c:choose>
                                                                <c:when test="${isAddOperation}">
                                                                  <tags:ip name="currentEntry.SourceIP" type="default" value="${DefinitionForm.currentEntry.SourceIP}"
                                                         spreadsheet="false" size="15" maxlength="15" />
                                                                </c:when>
                                                                <c:otherwise>
                                                                  <c:out value="${DefinitionForm.currentEntry.SourceIP}"></c:out>
                                                                </c:otherwise>
                                                              </c:choose>
                                                    </td>
                                                   </tr>
                                                  </table>
            

js file changes:

    function displayBlock(element){
            if (element[0] === undefined || element[0] ===  null) {
                    return;
            }
            element[0].readOnly = false;
            element[0].style.background = "";
    }
    
    function displayReadOnly(element){
            if (element[0] === undefined || element[0] ===  null) {
                    return;
            }
    
            element[0].readOnly = true;
            element[0].style.background = "lightgrey";
    }
    
    
    
    
    function proj_toggle(type,clear) {
    
    if (type === 'srcBackupInputs'){
                    toggler = document.getElementsByName("currentEntry.srcBackupInputs");
    
                    if(toggler[0].checked ){
                            
                            toggleField1 = document.getElementsByName("currentEntry.SourceIP");
                            displayBlock(toggleField1);
                            
                    }else{
                            toggleField = document.getElementsByName("currentEntry.sourceIP");
                            displayReadOnly(toggleField);
                    }
    }

Java file changes:

class SessionEntry
{
     private boolean srcBackupInputs;
     public boolean isSrcBackupInputs() {
        return srcBackupInputs;
     }

     public void setSrcBackupInputs(boolean iSrcBackupInputs) {
        srcBackupInputs = iSrcBackupInputs;
    }
}