Bootstrap 5表单验证：禁用输入框保留必填验证样式方案

核心问题是Bootstrap默认会跳过禁用状态的表单控件，不进行验证也不会应用验证样式。这里提供两种可行方案，优先推荐第一种：

方案一：用readonly模拟禁用状态（简单直接） #

把rSum的disabled属性换成readonly，再通过CSS把它改成禁用输入框的外观，这样它既能保持不可编辑，又能被Bootstrap的验证系统识别，直接应用红绿样式。

步骤1：修改HTML结构 #

给求和输入框加上readonly、required，以及Bootstrap表单验证所需的类：

<form id="sumForm" class="needs-validation" novalidate>
  <!-- 两个范围滑块示例 -->
  <div class="mb-3">
    <label for="slider1" class="form-label">滑块1</label>
    <input type="range" class="form-range" id="slider1" min="0" max="100" value="50">
  </div>
  <div class="mb-3">
    <label for="slider2" class="form-label">滑块2</label>
    <input type="range" class="form-range" id="slider2" min="0" max="100" value="50">
  </div>

  <!-- 求和结果输入框 -->
  <div class="mb-3">
    <label for="rSum" class="form-label">求和结果</label>
    <input type="number" class="form-control" id="rSum" readonly required>
  </div>

  <button type="submit" class="btn btn-primary">提交表单</button>
</form>

步骤2：添加CSS模拟禁用样式 #

让readonly的输入框看起来和禁用状态一致：

#rSum[readonly] {
  background-color: #e9ecef; /* 匹配Bootstrap禁用输入框的背景色 */
  cursor: default; /* 光标改成默认样式，提示不可编辑 */
}

步骤3：JavaScript同步求和与验证逻辑 #

监听滑块输入更新求和值，同时自定义验证规则（要求值必须为100）：

const slider1 = document.getElementById('slider1');
const slider2 = document.getElementById('slider2');
const rSum = document.getElementById('rSum');
const sumForm = document.getElementById('sumForm');

// 更新求和值并触发验证样式
function updateSum() {
  const total = parseInt(slider1.value) + parseInt(slider2.value);
  rSum.value = total;
  // 手动触发验证状态更新
  sumForm.classList.add('was-validated');
}

// 绑定滑块输入事件
slider1.addEventListener('input', updateSum);
slider2.addEventListener('input', updateSum);

// 表单提交时的自定义验证
sumForm.addEventListener('submit', function(e) {
  if (parseInt(rSum.value) !== 100) {
    e.preventDefault();
    e.stopPropagation();
    // 设置自定义错误提示
    rSum.setCustomValidity('求和结果必须等于100');
  } else {
    rSum.setCustomValidity('');
  }
  sumForm.classList.add('was-validated');
});

// 初始化求和值
updateSum();

方案二：保留disabled+隐藏验证字段（适合必须用disabled的场景） #

如果一定要保留disabled属性，就用一个隐藏的输入框承载验证逻辑，再把验证样式同步到显示用的rSum上：

步骤1：修改HTML，添加隐藏字段 #

<form id="sumForm" class="needs-validation" novalidate>
  <!-- 滑块部分和之前一样 -->
  <div class="mb-3">
    <label for="rSum" class="form-label">求和结果</label>
    <input type="number" class="form-control" id="rSum" disabled>
    <!-- 隐藏的验证字段 -->
    <input type="number" id="hiddenSum" class="d-none" required>
  </div>
  <button type="submit" class="btn btn-primary">提交表单</button>
</form>

步骤2：JavaScript同步值与样式 #

const slider1 = document.getElementById('slider1');
const slider2 = document.getElementById('slider2');
const rSum = document.getElementById('rSum');
const hiddenSum = document.getElementById('hiddenSum');
const sumForm = document.getElementById('sumForm');

function updateSum() {
  const total = parseInt(slider1.value) + parseInt(slider2.value);
  rSum.value = total;
  hiddenSum.value = total;

  // 同步验证样式到rSum
  if (total === 100) {
    rSum.classList.remove('is-invalid');
    rSum.classList.add('is-valid');
    hiddenSum.setCustomValidity('');
  } else {
    rSum.classList.remove('is-valid');
    rSum.classList.add('is-invalid');
    hiddenSum.setCustomValidity('求和结果必须等于100');
  }
}

slider1.addEventListener('input', updateSum);
slider2.addEventListener('input', updateSum);

sumForm.addEventListener('submit', function(e) {
  updateSum(); // 提交前再同步一次
  if (parseInt(hiddenSum.value) !== 100) {
    e.preventDefault();
    e.stopPropagation();
  }
  sumForm.classList.add('was-validated');
});

updateSum();

两种方案都能实现需求：保持求和输入框不可编辑，同时让它显示Bootstrap的验证红绿样式，且只有当值为100时才能提交表单。

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