Bootstrap表单使用form-floating时隐藏输入/选择框标签未同步隐藏问题

问题原因 #

你当前的JS逻辑仅对input、select这类输入控件本身做了显隐控制，而Bootstrap的form-floating是包裹输入控件和对应label的父容器，父容器未被隐藏时，内部的label元素自然会残留显示，导致重叠问题。字段位置变动后表现不同属于偶发的布局渲染差异，并非根因。

解决方案 #

无需修改现有HTML结构，直接通过jQuery定位到输入控件的form-floating父容器，控制父容器的显隐即可，优化后的代码如下：

$('#frmProjectInterconnect').change(function(){
    const needShow = $(this).val() == "Yes";
    // 处理互联容量字段
    const $capacityEl = $("#frmInterconnectionCapacity");
    $capacityEl.parent().toggle(needShow);
    needShow ? $capacityEl.attr({'required': '', 'data-error': 'This field is required.'}) : $capacityEl.removeAttr('required data-error');
    // 处理独享/共享字段
    const $dedicatedEl = $("#frmDedicatedOrShared");
    $dedicatedEl.parent().toggle(needShow);
    needShow ? $dedicatedEl.attr({'required': '', 'data-error': 'This field is required.'}) : $dedicatedEl.removeAttr('required data-error');
    // 处理服务商字段
    const $providerEl = $("#frmServiceProvider");
    $providerEl.parent().toggle(needShow);
    needShow ? $providerEl.attr({'required': '', 'data-error': 'This field is required.'}) : $providerEl.removeAttr('required data-error');
});

控制父容器显隐时会同时作用于内部的输入控件和标签，从根源避免标签残留重叠的问题，同时原有表单校验属性的逻辑不受影响。

内容的提问来源于stack exchange，提问作者Justin Ngan