Flask-WTF表单复选框勾选时禁用输入框问题求助

DevOps 小满

2026-8-19

问题原因与解决方法

核心问题

你定义了myFunction但没有给复选框绑定触发事件，所以勾选/取消勾选时函数根本不会执行；另外原脚本里的console.log缺少括号，属于语法错误，会导致控制台无法正常输出信息。

解决方法

方法1：给Flask-WTF字段添加事件属性

在你的表单类中，给full_amount_received字段添加render_kw参数，直接绑定onchange事件：

from flask_wtf import FlaskForm
from wtforms import BooleanField, FloatField

class RentAddForm(FlaskForm):
    full_amount_received = BooleanField('全额收到', render_kw={'onchange': 'myFunction()'})
    amount_received = FloatField('实收金额')

同时修正脚本里的console.log语法错误：

<script>
    function myFunction() {
        console.log('复选框状态变化');
        const checkBox = document.getElementById("full_amount_received");
        const amountInput = document.getElementById("amount_received");
        amountInput.disabled = checkBox.checked;
    }
    // 页面加载时初始化状态
    myFunction();
</script>

方法2：用JavaScript事件监听（推荐，解耦表单与JS）

不需要修改表单类，直接修改脚本，通过addEventListener绑定事件，同时处理初始状态：

<script>
document.addEventListener('DOMContentLoaded', function() {
    const checkBox = document.getElementById("full_amount_received");
    const amountInput = document.getElementById("amount_received");

    // 定义切换状态的函数
    const toggleAmountDisabled = () => {
        amountInput.disabled = checkBox.checked;
        console.log('当前复选框状态：', checkBox.checked);
    };

    // 页面加载完成后先执行一次，确保初始状态正确
    toggleAmountDisabled();
    // 给复选框绑定change事件
    checkBox.addEventListener('change', toggleAmountDisabled);
});
</script>