为Django Admin添加Ajax功能：自定义字段显示逻辑解决方案问询

针对你提到的场景，我们可以通过模型层保证数据一致性 + 前端JS实现动态交互的组合方案来解决，不需要复杂的Ajax请求（因为只是前端显示逻辑，没有后端数据依赖），非常简洁。

步骤1：模型层确保数据正确性 #

首先在模型中重写save方法，保证当has_parent为False时，inMainMenu自动被设为False，避免前端操作遗漏导致的数据不一致：

from django.db import models

class YourModel(models.Model):
    has_parent = models.BooleanField("是否存在父级", default=False)
    in_main_menu = models.BooleanField("是否在主菜单展示", default=False)
    # 其他字段...

    def save(self, *args, **kwargs):
        # 当没有父级时，强制不在主菜单展示
        if not self.has_parent:
            self.in_main_menu = False
        super().save(*args, **kwargs)

步骤2：Django Admin添加前端动态交互 #

接下来我们需要在Admin后台添加自定义JavaScript，监听has_parent复选框的变化，动态显示/隐藏in_main_menu字段：

2.1 创建自定义JS文件 #

在你的应用目录下创建static/admin/js/your_model.js文件（如果没有对应目录，手动创建即可），写入以下代码：

document.addEventListener('DOMContentLoaded', function() {
    // 获取对应的DOM元素
    const hasParentCheckbox = document.getElementById('id_has_parent');
    const inMainMenuRow = document.getElementById('id_in_main_menu').closest('.form-row');

    // 初始化页面时根据当前状态设置显示/隐藏
    toggleInMainMenuField();

    // 监听复选框变化事件
    hasParentCheckbox.addEventListener('change', toggleInMainMenuField);

    // 核心逻辑函数
    function toggleInMainMenuField() {
        if (hasParentCheckbox.checked) {
            // 存在父级时显示字段
            inMainMenuRow.style.display = 'block';
        } else {
            // 不存在父级时隐藏字段，并将复选框设为未选中
            inMainMenuRow.style.display = 'none';
            document.getElementById('id_in_main_menu').checked = false;
        }
    }
});

2.2 在Admin中引入JS文件 #

修改应用目录下的admin.py，自定义ModelAdmin并通过Media类引入刚才的JS文件：

from django.contrib import admin
from .models import YourModel

class YourModelAdmin(admin.ModelAdmin):
    # 按需求配置你的字段显示顺序
    fields = ('has_parent', 'in_main_menu', '其他字段...')

    # 引入自定义JS
    class Media:
        js = ('admin/js/your_model.js',)

admin.site.register(YourModel, YourModelAdmin)

注意事项 #

1. 确保Django的静态文件配置正确，开发环境下DEBUG=True会自动处理静态文件，生产环境需要运行python manage.py collectstatic收集静态文件。
2. 如果你的字段ID不是id_has_parent或id_in_main_menu，可以通过浏览器开发者工具查看实际ID，修改JS中的对应值即可。

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