为何控制表单select禁用的onchange函数无法正常工作？

我有两个表单选择菜单transactionSelection和categorySelection，需求是当transactionSelection的值为income时禁用categorySelection，categorySelection默认需处于禁用状态。编写了disableSelection()函数后，功能仅能正常工作一次：切换到其他选项后，categorySelection的disabled属性消失，且无法再次设置；若移除默认的disabled属性，函数则完全不生效。其他JavaScript代码（如多个chart.js图表）可正常运行，请问哪里出错了？

相关代码 #

HTML（交易类型选择） #

<label for="transactionSelection" class="form-label mb-0">Transaktionsart</label>
<select class="form-select" id="transactionSelection" onchange="disableSelection()" aria-label="Transaction selection">
    <option value="income">Einnahme</option>
    <option value="spendings">Ausgabe</option>
</select>

HTML（类别选择） #

<label for="categorySelection" class="form-label mb-0">Kategorie</label>
<select class="form-select" id="categorySelection" aria-label="Category selection" disabled>
    <option value="income">Einnahmen</option>
    <option value="mobility">Mobilität</option>
    <option value="home-entertainment">Heimunterhaltung</option>
    <option value="going-out">Ausgehen</option>
    <option value="sport-activities">Sportaktivitäten</option>
    <option value="real-estate">Wohnen</option>
    <option value="insurance">Versicherungen</option> 
    <option value="cost-of-living">Lebenshaltungskosten</option>
    <option value="investing">Investments</option>
    <option value="telecommunication">Telekommunikation</option>
    <option value="media-subscription">Medienabos</option>
    <option value="philanthropy">Philantropie</option>
    <option value="financial-cost">Finanzkosten</option>
    <option value="vacation">Urlaub</option>
    <option value="education">Bildung</option>
    <option value="emigration">Auswanderung</option>
    <option value="other">Sonstiges</option>
</select>

JavaScript #

<script>
    function disableSelection() {
        if (this.value == 'income') {
            document.getElementById('categorySelection').disabled = true;
        }
        else {
            document.getElementById('categorySelection').disabled = false;
        }
    }
</script>

错误原因 #

核心问题是通过onchange="disableSelection()"直接调用函数时，函数内部的this指向的是全局window对象，而非触发事件的transactionSelection下拉菜单：

• 初始状态下categorySelection禁用是HTML默认属性的作用，和函数无关。
• 第一次切换到spendings时，this.value等于window.value（即undefined），进入else分支将菜单设为可用。
• 后续再切回income时，this.value依然是undefined，还是进入else分支，无法重新禁用菜单，导致功能失效。

修复方案 #

方案1：调用函数时传递当前元素 #

修改HTML的onchange属性，将当前下拉菜单元素作为参数传入：

<select class="form-select" id="transactionSelection" onchange="disableSelection(this)" aria-label="Transaction selection">

同时修改JavaScript函数，使用传入的元素获取选中值：

function disableSelection(selectEl) {
    const categorySelect = document.getElementById('categorySelection');
    categorySelect.disabled = selectEl.value === 'income';
}

方案2：使用事件监听（推荐） #

采用更现代的事件绑定方式，实现HTML与JavaScript解耦，同时确保this指向正确：

1. 移除HTML中的onchange属性：

<select class="form-select" id="transactionSelection" aria-label="Transaction selection">

2. 修改JavaScript代码，通过addEventListener绑定事件，并初始化初始状态：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const transactionSelect = document.getElementById('transactionSelection');
    const categorySelect = document.getElementById('categorySelection');

    function disableSelection() {
        categorySelect.disabled = this.value === 'income';
    }

    // 绑定change事件
    transactionSelect.addEventListener('change', disableSelection);
    // 页面加载时执行一次，确保初始状态与选中值匹配
    disableSelection.call(transactionSelect);
});
</script>

这种方式不仅解决了this指向问题，还能确保页面加载时菜单状态与初始选中值一致，扩展性更强。

内容的提问来源于stack exchange，提问作者iLucas.exe