自定义JavaScript修改的表单内容未被识别，保存后为空如何修复

问题根因 #

你代码中给id_name输入框设置了disabled: true属性，这是提交后值为空的核心原因：按照HTML表单规范，被标记为disabled的元素不会被浏览器纳入提交的表单参数中，Django后端接收不到该字段的传值，存入数据库时自然为空。

修复方案 #

两种常用方案可选：

方案1：替换disabled为readonly属性 #

readonly属性的效果和disabled类似，用户无法手动修改输入框内容，区别是readonly标记的元素会正常参与表单提交，直接替换对应代码行即可：

window.addEventListener("load", function () {
(function ($) {
    $(document).ready(function () {
        console.log($('#id_main_product'))

        $('#id_main_product').change(function () {
            if (this.checked) {
                $('#id_name').val($('#id_category :selected').text())
                // 把disabled改成readonly
                $('#id_name').prop("readonly", true)
            }
            else {
                // 取消勾选时如果要恢复编辑，保留这行即可
                $('#id_name').prop("readonly", false)
                console.log('unchecked')
            }

        })
    })
})(django.jQuery);

方案2：监听表单提交事件，提交前移除disabled属性 #

如果业务场景必须使用disabled属性，可以在表单提交前临时移除该属性，让参数正常传递：

window.addEventListener("load", function () {
(function ($) {
    $(document).ready(function () {
        console.log($('#id_main_product'))

        $('#id_main_product').change(function () {
            if (this.checked) {
                $('#id_name').val($('#id_category :selected').text())
                $('#id_name').prop("disabled", true)
            }
            else {
                $('#id_name').prop("disabled", false)
                console.log('unchecked')
            }
        })

        // 新增表单提交监听逻辑
        $('form').submit(function() {
            // 提交前移除disabled属性，保证参数正常传递
            $('#id_name').prop("disabled", false)
            return true
        })
    })
})(django.jQuery);

两种方案都可以解决提交空值的问题，优先推荐方案1，实现更简单无额外兼容逻辑。

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