如何在Django Crispy Forms中添加Bootstrap Toggle开关组件

问题说明 #

当前使用Crispy Forms及layout helper生成输入表单，需要在表单内添加Toggle开关切换组件。

• 期望实现效果：
• 当前实际渲染效果：

现有代码 #

forms.py

class RequestForm(forms.ModelForm):
on_prem = forms.CharField(widget=forms.CheckboxInput(attrs={"class": "slider form-control"}))

class Meta:
    model = Request
    fields = ['on_prem']

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    self.helper = FormHelper(self)
    self.helper.layout = Layout(
        Div(
            Div(Field('on_prem'), css_class='col-md-3', ),
            css_class='row',
        ),
    )

models.py

class Request(models.Model):        
on_prem = models.BooleanField(default=False)

form.html

<form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    {% crispy form %}
    <button type="submit" class="d-block btn mt-4 w-50 mx-auto">
        Save Request 
    </button>
</form>

可行实现方案 #

现有代码有两个核心问题导致开关效果出不来：

1. 字段类型不匹配：模型层on_prem是BooleanField，表单层错误重定义为CharField，不仅会导致值类型转换异常，也会影响Crispy的默认渲染结构。
2. CSS类和DOM结构不匹配：Bootstrap 5+的原生Toggle开关要求固定嵌套结构——外层容器需挂载form-check form-switch类，内部checkbox元素挂载form-check-input类，同级label挂载form-check-label类，直接给checkbox加form-control类无法触发开关样式。

不需要自定义字段模板，直接调整forms.py的配置即可实现效果，修改后代码如下：

class RequestForm(forms.ModelForm):
    # 修正字段类型为BooleanField，给checkbox挂载正确的样式类
    on_prem = forms.BooleanField(
        widget=forms.CheckboxInput(attrs={"class": "form-check-input"}),
        label="On-Premise" # 替换为开关旁需要显示的实际文案
    )

    class Meta:
        model = Request
        fields = ['on_prem']

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.helper = FormHelper(self)
        self.helper.layout = Layout(
            Div(
                Div(
                    # 给字段外层容器加Bootstrap开关要求的样式类
                    Div(
                        Field('on_prem'),
                        css_class='form-check form-switch'
                    ),
                    css_class='col-md-3',
                ),
                css_class='row',
            ),
        )

自定义调整说明 #

• 如果需要调整开关尺寸：直接给CheckboxInput的attrs添加行内样式，比如"style": "font-size: 1.4rem;"即可放大开关。
• 如果需要调整开关颜色：给attrs添加"style": "accent-color: #2563eb;"即可修改开关选中态的主题色，不需要额外编写自定义CSS。

注意：以上方案适配Bootstrap 5及以上版本，Bootstrap 4无原生开关组件，需额外引入bootstrap-switch等第三方静态资源后再调整对应DOM类名。

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