在模板上隐藏ModelMultipleChoiceField以进行自定义输入

Question

我希望用户选择属于某个模型的多个元素。我不想使用django表单的默认'ctrl + click'输入，但自己创建一个复选框表。

出于这个原因，我隐瞒了ModelMultipleChoiceField通过定义窗口小部件：

field = forms.ModelMultipleChoiceField(..., widget=forms.MultipleHiddenInput()) 

然后我添加表单元素到模板如下：

<form method="POST" class="locklist-form" id="locklist-form">{% csrf_token %} 
    {{ form.field }} 
</form> 

在这一步，我希望选择选择要添加到HTML页面的元素（隐藏），以便我可以访问元素选项并使用javascript修改它们。但是，它不会向HTML页面添加任何内容。

我使用这种方法与其他类型的形式fieds。对于TextField HTML页面有如图所示的隐藏元素：

为什么它不与ModelMultipleChoiceField工作？我怎样才能用Javascript修改这个字段的选择？

编辑： MultipleHiddenInput renders only if with initial data是一个类似的问题。但是应用它并不会导致预期的解决方案。在这个问题上，则有望呈现以下为隐藏： 但随之而来的MultipleHiddenInput renders only if with initial data，当我修改窗体构造函数：

form = MyForm(initial={'field':MyModel.objects.all()}) 

绘制元素如下：

它也许有用，但不完全是预期的。我需要在对象列表中标记一些选中的选项。

Answer 1

我已经使用Javascript完成了它，而不是依赖于Django的功能。我将ModelMultipleChoiceField的表单直接添加到模板中（不隐藏）。然后我运行JavaScript脚本，当页面加载：隐藏类的

var field = document.getElementById('id_field'); 
selecter.setAttribute('class', 'hidden'); 

CSS定义如下：

.hidden{ 
    display: none; 
} 

这得到我想要的局面。

在这一点上，我可以通过JavaScript修改某些项目：ModelMultipleChoiceField如下呈现隐藏

document.getElementById('id_field').options[index].selected = boolValue;