隐藏输入/选择时，表单字段标签不会隐藏

Posted 2023-03-21

【中文标题】隐藏输入/选择时，表单字段标签不会隐藏

【英文标题】：Form field labels do not hide when inputs/selects are hidden

【发布时间】：2021-12-20 11:02:34

【问题描述】：

我创建了一个 Bootstrap 表单，并在控件上使用了表单浮动类。

当我隐藏一些控件时，标签仍然存在并被挤压在一起。这会发生在某些控件上，但不会发生在其他控件上。代码看起来一模一样，所以我对正在发生的事情有点恼火。

我确实注意到的一件事是，当我将隐藏字段移到触发隐藏的字段上方时，标签会正确隐藏。但是，如果我将它们移回触发隐藏的字段下方，标签会再次保留并重叠。

html：

<div class="form-floating mb-4">
    <select class="form-select" id="frmProjectInterconnect" required>
        <option value="" selected disabled></option>
        <option>Yes</option>
        <option>No</option>
    </select>
    <label for="frmProjectInterconnect">Project Interconnection Point</label>
</div>

<div class="form-floating mb-4">
    <input type="number" class="form-control" id="frmInterconnectionCapacity" required>
    <label for="frmInterconnectionCapacity">Interconnection Capacity (Mbps)</label>
</div>

<div class="form-floating mb-4">
    <select class="form-select" id="frmDedicatedOrShared" required>
        <option value="" selected disabled> </option>
        <option>Dedicated</option>
        <option>Shared</option>
    </select>
    <label for="frmDedicatedOrShared">Dedicated or Shared?</label>
</div>

<div class="form-floating mb-4">
    <input type="text" class="form-control" id="frmServiceProvider" required>
    <label for="frmServiceProvider">Service Provider</label>
</div>

javascript：

$('#frmProjectInterconnect').change(function()
    if($(this).val() == "Yes") 
        $("#frmInterconnectionCapacity").show();
        $("#frmInterconnectionCapacity").attr('required', '');
        $("#frmInterconnectionCapacity").attr('data-error', 'This field is required.');
        $("#frmDedicatedOrShared").show();
        $("#frmDedicatedOrShared").attr('required', '');
        $("#frmDedicatedOrShared").attr('data-error', 'This field is required.');
        $("#frmServiceProvider").show();
        $("#frmServiceProvider").attr('required', '');
        $("#frmServiceProvider").attr('data-error', 'This field is required.');
     else 
        $("#frmInterconnectionCapacity").hide();
        $("#frmInterconnectionCapacity").removeAttr('required');
        $("#frmInterconnectionCapacity").removeAttr('data-error');
        $("#frmDedicatedOrShared").hide();
        $("#frmDedicatedOrShared").removeAttr('required');
        $("#frmDedicatedOrShared").removeAttr('data-error');
        $("#frmServiceProvider").hide();
        $("#frmServiceProvider").removeAttr('required');
        $("#frmServiceProvider").removeAttr('data-error');
    
);

【参考方案1】：

尝试显示/隐藏父包装器

$('#frmProjectInterconnect').change(function()
    if($(this).val() == "Yes") 
        $("#frmInterconnectionCapacity").parent().show();
        $("#frmInterconnectionCapacity").attr('required', '');
        $("#frmInterconnectionCapacity").attr('data-error', 'This field is required.');
        $("#frmDedicatedOrShared").parent().show();
        $("#frmDedicatedOrShared").attr('required', '');
        $("#frmDedicatedOrShared").attr('data-error', 'This field is required.');
        $("#frmServiceProvider").parent().show();
        $("#frmServiceProvider").attr('required', '');
        $("#frmServiceProvider").attr('data-error', 'This field is required.');
     else 
        $("#frmInterconnectionCapacity").parent().hide();
        $("#frmInterconnectionCapacity").removeAttr('required');
        $("#frmInterconnectionCapacity").removeAttr('data-error');
        $("#frmDedicatedOrShared").parent().hide();
        $("#frmDedicatedOrShared").removeAttr('required');
        $("#frmDedicatedOrShared").removeAttr('data-error');
        $("#frmServiceProvider").parent().hide();
        $("#frmServiceProvider").removeAttr('required');
        $("#frmServiceProvider").removeAttr('data-error');
    
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"></link>
<div class="form-floating mb-4">
    <select class="form-select" id="frmProjectInterconnect" required>
        <option value="" selected disabled></option>
        <option>Yes</option>
        <option>No</option>
    </select>
    <label for="frmProjectInterconnect">Project Interconnection Point</label>
</div>

<div class="form-floating mb-4">
    <input type="number" class="form-control" id="frmInterconnectionCapacity" required>
    <label for="frmInterconnectionCapacity">Interconnection Capacity (Mbps)</label>
</div>

<div class="form-floating mb-4">
    <select class="form-select" id="frmDedicatedOrShared" required>
        <option value="" selected disabled> </option>
        <option>Dedicated</option>
        <option>Shared</option>
    </select>
    <label for="frmDedicatedOrShared">Dedicated or Shared?</label>
</div>

<div class="form-floating mb-4">
    <input type="text" class="form-control" id="frmServiceProvider" required>
    <label for="frmServiceProvider">Service Provider</label>
</div>

编辑：对于case dropdown选项在最后，如果我们不隐藏父wrapper，看起来标签是隐藏的，其实就在drop后面下。我添加了 1 秒超时来隐藏下拉菜单，并且标签将可见。见代码sn-p。

$('#frmProjectInterconnect').change(function()
        if($(this).val() == "Yes") 
            $("#frmInterconnectionCapacity").show();
            $("#frmInterconnectionCapacity").attr('required', '');
            $("#frmInterconnectionCapacity").attr('data-error', 'This field is required.');
            $("#frmDedicatedOrShared").show();
            $("#frmDedicatedOrShared").attr('required', '');
            $("#frmDedicatedOrShared").attr('data-error', 'This field is required.');
            $("#frmServiceProvider").show();
            $("#frmServiceProvider").attr('required', '');
            $("#frmServiceProvider").attr('data-error', 'This field is required.');
         else 
            $("#frmInterconnectionCapacity").hide();
            $("#frmInterconnectionCapacity").removeAttr('required');
            $("#frmInterconnectionCapacity").removeAttr('data-error');
            $("#frmDedicatedOrShared").hide();
            $("#frmDedicatedOrShared").removeAttr('required');
            $("#frmDedicatedOrShared").removeAttr('data-error');
            $("#frmServiceProvider").hide();
            $("#frmServiceProvider").removeAttr('required');
            $("#frmServiceProvider").removeAttr('data-error');
            
            setTimeout(() => 
              $('#frmProjectInterconnect').hide();
            , 1000);
        
    );

   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"></link>

    <div class="form-floating mb-4">
        <input type="number" class="form-control" id="frmInterconnectionCapacity" required>
        <label for="frmInterconnectionCapacity">Interconnection Capacity (Mbps)</label>
    </div>

    <div class="form-floating mb-4">
        <select class="form-select" id="frmDedicatedOrShared" required>
            <option value="" selected disabled> </option>
            <option>Dedicated</option>
            <option>Shared</option>
        </select>
        <label for="frmDedicatedOrShared">Dedicated or Shared?</label>
    </div>

    <div class="form-floating mb-4">
        <input type="text" class="form-control" id="frmServiceProvider" required>
        <label for="frmServiceProvider">Service Provider</label>
    </div>
    <div class="form-floating mb-4">
        <select class="form-select" id="frmProjectInterconnect" required>
            <option value="" selected disabled></option>
            <option>Yes</option>
            <option>No</option>
        </select>
        <label for="frmProjectInterconnect">Project Interconnection Point</label>
    </div>

【讨论】：

成功了！现在为什么？特别是，为了简洁，我没有显示所有的 html / 脚本，但我在表单的下部具有完全相同的结构和逻辑。无需调用 parent()。我非常感谢您对上述问题的快速回复。我尝试了几个小时，但我很新。

@Justin Ngan 我认为它们实际上并没有隐藏，只是隐藏在大 Yes/No 下拉框后面

这很有趣！如果您认为值得一提，请支持我的问题。我想很多人不会知道这个！