Bootstrap Select禁用后提交无法传值到服务端如何解决？

AI 小北

2026-10-19

问题根本原因

HTML 原生规则明确规定：带disabled属性的表单元素不会被纳入表单提交的参数中，这和Bootstrap Select插件无关，是浏览器的默认行为。

可行解决方案

下面给出3种常用的实现方案，可根据你的业务场景选择：

方案1：表单提交前临时解除disabled属性（改动量最小）

无需调整现有业务逻辑，只需要给表单绑定submit事件，提交瞬间临时移除禁用属性，用户完全感知不到改动：

// 将选择器替换为你实际的表单ID
$('form#你的表单ID').on('submit', function () {
  // 提交前临时取消禁用，让参数正常上传
  $('.tax_rate').prop('disabled', false);
  // 提交后异步恢复禁用状态，同步提交场景下可以省略这段
  setTimeout(() => {
    $('.tax_rate').prop('disabled', true).selectpicker('refresh');
  }, 0);
});

方案2：新增隐藏表单域同步值（稳定性最高）

新增一个同名的隐藏input同步下拉框的值，服务端直接读取隐藏字段的参数即可，不受下拉框状态影响：

页面新增隐藏域：

<!-- name属性和原select保持一致，原select可以去掉name属性避免重复提交 -->
<input type="hidden" name="tax_rate" id="tax_rate_hidden">

调整原有业务逻辑，同步值到隐藏域：

if ( $('#po_currency').val() == $('#business_currency').val() ) {
    $('.tax_rate').selectpicker();
    // 下拉框值变化时同步到隐藏域
    $('.tax_rate').on('change', function() {
        $('#tax_rate_hidden').val($(this).val());
    });
} else {
    $('.tax_rate').selectpicker('val', 4);
    $('.tax_rate').prop('disabled', true);
    $('.tax_rate').selectpicker('refresh');
    // 固定值直接赋值到隐藏域
    $('#tax_rate_hidden').val(4);
}

方案3：用样式模拟禁用效果，不设置原生disabled属性

不添加原生disabled属性，仅通过样式禁止用户操作下拉框，下拉框本身处于启用状态，参数会正常提交：

if ( $('#po_currency').val() == $('#business_currency').val() ) {
    $('.tax_rate').selectpicker();
    // 恢复可交互状态
    $('.tax_rate').next('.bootstrap-select').find('button').attr('tabindex', 0).css('pointer-events', 'auto');
} else {
    $('.tax_rate').selectpicker('val', 4);
    // 仅禁止用户交互，不设置disabled
    $('.tax_rate').next('.bootstrap-select').find('button').attr('tabindex', -1).css('pointer-events', 'none');
    $('.tax_rate').selectpicker('refresh');
}

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