时间戳

首页 > 解决方案 > 隐藏输入/选择时，表单字段标签不会隐藏

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

问题描述

我已经创建了一个 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');
    }
});

在触发隐藏之前

触发隐藏后

标签： javascriptformsbootstrap-4form-control

解决方案

尝试显示/隐藏父包装器

$('#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>

编辑：对于案例下拉选项在最后，如果我们不隐藏父包装，看起来标签是隐藏的，但实际上它们就在下拉列表的后面。我添加了 1 秒超时来隐藏下拉菜单，并且标签将可见。请参阅代码片段。

$('#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>

推荐阅读