如何基于动态下拉选择器的选中选项禁用指定input输入字段？

云上老周

2026-9-30

问题原因

你当前代码的核心问题有两个：

DOM元素的禁用属性拼写错误，正确属性名是disabled，你写的disable遗漏了末尾的字母d
你定义的TipoCompra函数没有绑定到下拉选择框的change事件，选择选项时不会触发执行

方案1：原生JavaScript实现

步骤1：修正函数代码

function TipoCompra(){
    var tipoCompra = document.getElementById('tipoCompra').value;
    var fob = document.getElementById('fob');
    if (tipoCompra == 'Nacional'){
        fob.disabled = true;
        // 可选：禁用时清空已输入的内容
        fob.value = '';
    } else {
        fob.disabled = false;
    }
}

步骤2：给下拉框绑定change事件

你可以直接在select标签上添加onchange属性：

<select name="" class="form-control" id="tipoCompra" required onchange="TipoCompra()">

也可以在JS代码中动态绑定：

document.getElementById('tipoCompra').addEventListener('change', TipoCompra);

方案2：jQuery实现

如果你习惯用jQuery写法，可以直接用以下代码，无需单独声明函数：

$(function(){
    // 监听下拉框选择变化
    $('#tipoCompra').on('change', function(){
        const selectedVal = $(this).val();
        // 直接通过prop修改disabled属性，判断逻辑可以简化成一行
        $('#fob').prop('disabled', selectedVal === 'Nacional');
        // 可选：选中Nacional时清空输入框内容
        if(selectedVal === 'Nacional') $('#fob').val('');
    })
})