我一直在网上搜索如何将颜色/主题应用于django中的复选框表单项,但找不到如何操作。

我想做的事情可能很简单,但是尽管所有主题和博客都是红色的,我仍然无法做到。

所以这是我的表格简化:

class MyForm(forms.Form):

    def __init__(self, data, *args, **kwargs):
        super(MyForm, self).__init__(data, *args, **kwargs)
        self.fields['checkbox'] = forms.MultipleChoiceField(
            label='Set of questions to know you better',
            required=True,
            widget=forms.CheckboxSelectMultiple(attrs={'disabled': 'disabled'}),
            choices=((1, 'Proposition 1'), (2, 'Proposition 2'), (3, 'Proposition 3'), (4, 'Proposition 4')),
            initial=(1, 2, 4,)
            )

而且我想知道如何修改我目前看起来的html

<form action="{% url 'dummy' %}" method="post">

    {% csrf_token %}
    {{ form.as_p }}

</form>

所以初始设置为True的所有选项都有一个给定的css应用于它们,而那些设置为False的另一个选择。

希望我的问题有道理。 如果没有,请不要犹豫。

最好:

埃里克

添加当前渲染: 在此输入图像描述

编辑:添加生成的HTML

<form action="/dummy" method="post">

    <input type='hidden' name='csrfmiddlewaretoken' value='LGZ0mwqrAKxb7CzFvOyYIyUIcDSARy4iwEtHVDjKPpnBd1AIXlk4UyxRuCSIEviY' />
    <p><label>Set of questions to know you better :</label> <ul id="id_checkbox">
    <li><label for="id_checkbox_0"><input type="checkbox" name="checkbox" value="1" disabled="disabled" id="id_checkbox_0" checked />
 Proposition 1</label>

</li>
    <li><label for="id_checkbox_1"><input type="checkbox" name="checkbox" value="2" disabled="disabled" id="id_checkbox_1" checked />
 Proposition 2</label>

</li>
    <li><label for="id_checkbox_2"><input type="checkbox" name="checkbox" value="3" disabled="disabled" id="id_checkbox_2" />
 Proposition 3</label>

</li>
    <li><label for="id_checkbox_3"><input type="checkbox" name="checkbox" value="4" disabled="disabled" id="id_checkbox_3" checked />
 Proposition 4</label>

</li>
</ul></p>

</form>

#1楼 票数:1 已采纳

如果你需要设置检查输入的样式,你可以使用CSS伪类:checked ,这样:

input:checked {
  /*some code here */
}

但是,如果您需要有条件地将类添加到输入中,则可以在实例化表单的视图中执行此操作并覆盖create_option方法,但我认为创建自定义模板标记并使用它更容易。 您可以尝试以下内容:

from django import template

@register.filter
def add_css(checkbox_input):
    checkbox_input.data['attrs'].update({"class":"your-class"})
    return checkbox_input

然后在模板中

{% for x in form.checkbox %}
    {% if x.data.selected %}
        {{ x|add_css }}
    {% else %}
       {{ x }}
    {% endif %}
{% endfor %}

#2楼 票数:0

尝试基于CheckboxSelectMultiple创建一个新的Widget,覆盖create_option方法。

如果选择了选项,则添加新的类属性。

def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
    [..]
    if selected:
        option_attrs.update(self.checked_attribute)
        # add your class here to option_attrs
    [..]

#3楼 票数:-1

好的,您也可以使用jQuery或vanilla js动态添加类,因为我总是使用jQuery(你也应该使用它,它的代码比vanilla js少得多)我将提供jQuery解决方案:

<script "src={% static 'jquery.js' %}" type="text/javascript"></script> // provide path to jquery or use cdn, whatever just add jquery
<script>
$(document).ready(function() {
    // On document ready add relevant classes to each checkbox
    $('input[name=checkbox]').each(function(){
        if($(this).is(':checked')){
            $(this).addClass('checked');
        }
        else{
          $(this).addClass('unchecked');
        }
        console.log(this);
    });
    // On checkbox change, remove classes and add new class based on if its checked or not
    $('input[name=checkbox]').change(function(){
        $(this).removeClass('checked unchecked');
        if($(this).is(':checked')){
            $(this).addClass('checked');
        }
        else{
            $(this).addClass('unchecked');
        }
        console.log(this);
    });
});
</script>

jsFiddle演示。

  ask by eric1994 translate from so

未解决问题?本站智能推荐:

2回复

Django模板表单渲染

我的问题不是在模板上显示Django表单字段。这很愚蠢,但我还没有找到任何解决方案。 我的观点: 我的add_comment模板: 我包括: django为什么不显示表单字段,尽管显示按钮? 编辑: 我在帖子视图中渲染表单。
2回复

转换JSON形式并渲染为HTML

我正在开发一个保存并显示的表单生成器,目前已卡住。 我对JSON的概念完全陌生,但是我希望将以下代码呈现为html形式(仅作为示例) 任何帮助将不胜感激。 我在网上看到的大多数示例都是针对提交后的json数据,而不是显示实际表单
1回复

Django:子模型字段未呈现

所有外键、布尔值和选项字段都未在表单模板上呈现。但它们的标签标记正在呈现。 例如:这是一个学校系统的“生成时间表”模型。 型号 我已经在 forms.py 文件中导入了 forms.py 查看: 模板(dalltimetable.html):
2回复

Django - Render 在我的项目中不起作用

我正在处理像 1 周这样的表格,但无法解决我的问题。 可能我忽略了其他人可以轻松找到的东西,但完全不知道该怎么做。 我通过开始构建表单来识别问题。 我不得不为表单使用render ,但每次尝试都失败了。 我能够连接 db 并在 html 页面中显示数据,但是每当我使用render而不是render_
1回复

在Django中发生错误时呈现管理表单

我有一个包含带外键的字段的模型,该字段可以为NULL并且是可选的。 如果此字段没有值,我可以在管理页面中保存此表单而不会出现任何问题。 但是,当我的表单上出现错误时,我的表单无法呈现,Django会返回以下错误: 以下是我的模型的样子: 这是我自定义表单的自定义clean()
4回复

如何将django模板变量渲染为html?

我想要的是堆栈溢出。 用户可以HTML格式化他们的文本输入,页面应该以完全相同的方式呈现, 我使用wmd.js来存储格式化的输入,考虑我有一个带有字符串值"<p>something</p>"的上下文变量{{variable}} 。 当我渲染模板时, 它将
1回复

如何使用MutationObserver检测div值(由Django渲染)的变化

我正在渲染从Django后端到前端的值,并且试图通过MutationObserver检测div值的变化。 下面是我当前的代码:MutationObserver部分: html部分: 我正在将字符串“ dummyValue”呈现给div,但只是看不到函数内部console.log
1回复

在 Python 3.7/Django 3 中,如何在 Web 浏览器中获取页面的渲染 HTML?

我在 Django 3 中使用 Python 3.7。我目前使用以下代码生成具有给定 URL 的 Web 浏览器 如何获取渲染的 DOM 的 HTMl? 请注意,这与“查看源代码”显示的内容不同。 我对获取在浏览器中运行“Inspect Element”时看到的 DOM 版本更感兴趣。 我可能使