隱藏輸入/選擇時，表單字段標簽不會隱藏

Question

我已經創建了一個 Bootstrap 表單，並且我在控件上使用了類 form-floating。

當我隱藏一些控件時，標簽會保留並被揉在一起。 這會發生在某些控件上，但不會發生在其他控件上。 代碼看起來完全一樣，所以我對發生的事情有點惱火。

我注意到的一件事是，當我將隱藏字段移動到觸發隱藏的字段上方時，標簽被正確隱藏。 但是，如果我將它們移回觸發隱藏的字段下，標簽將再次保留並重疊。

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');
    }
});

Answer 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>