如何在首个表单字段（Case Title）完成前禁用Bootstrap Tab标签页？

核心思路 #

监听Case Title输入框的内容变化，根据输入框是否有值，动态切换其他Tab标签页的可交互状态：输入框为空时禁用Tab，有内容时恢复可用。

具体实现步骤 #

1. 给目标Tab添加统一标识

确保所有需要禁用的Tab标签页拥有相同类名（比如tab-link），方便批量操作，示例HTML结构如下：

<!-- Tab标签容器 -->
<div class="tab-nav">
  <a href="#basic-tab" class="tab-link active">基础信息</a>
  <a href="#detail-tab" class="tab-link">案件详情</a>
  <a href="#submit-tab" class="tab-link">确认提交</a>
</div>

<!-- Case Title输入框 -->
<input type="text" id="caseTitle" placeholder="请输入Case Title">

2. 编写JavaScript控制逻辑

获取输入框和Tab元素，通过监听输入事件切换Tab状态：

// 获取核心元素
const caseTitleInput = document.getElementById('caseTitle');
const tabLinks = document.querySelectorAll('.tab-link');

// 定义Tab状态切换函数
function setTabStatus(isEnabled) {
  tabLinks.forEach(tab => {
    // 跳过当前激活的Tab（比如第一个基础信息Tab）
    if (!tab.classList.contains('active')) {
      if (isEnabled) {
        tab.removeAttribute('disabled');
        tab.style.pointerEvents = 'auto';
        tab.style.opacity = '1';
      } else {
        tab.setAttribute('disabled', true);
        tab.style.pointerEvents = 'none';
        tab.style.opacity = '0.5';
      }
    }
  });
}

// 页面加载时初始化状态
setTabStatus(caseTitleInput.value.trim() !== '');

// 监听输入框内容变化
caseTitleInput.addEventListener('input', function() {
  const hasContent = this.value.trim() !== '';
  setTabStatus(hasContent);
  // 保留你原有的Next按钮控制逻辑
  // document.getElementById('nextBtn').disabled = !hasContent;
});

3. 细节说明

• 如果Tab是<button>标签，直接设置disabled属性即可禁用；如果是<a>标签，需要配合pointer-events: none阻止点击行为，同时调整透明度给用户视觉提示。
• 可根据实际需求调整禁用范围，比如只禁用特定Tab，而非全部非激活Tab。

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