当满足特定条件时，如何将 Django 表单中的字段设置为只读？

Question

根据下图，我试图在任务状态为Finalized或Cancelled时将字段类别和当前点设置为不可编辑，否则字段应可编辑.

下面是我的 html 文件中的代码。

{% extends "base.html" %} {% load widget_tweaks %} 
{% block content %}

<div id="form-group">
    <form method="POST" action="." enctype="multipart/form-data">
    {% csrf_token %}
    <label>Select your category</label>
        {{ form.category|add_class:"card" }}
    <label>What's the status of the task?</label>
        {{ form.status|add_class:"card" }}
    <label>Current points:</label>
        {{ form.points|add_class:"card" }}
    <label>Finalized date:</label>
        {{ form.ending_date|add_class:"card" }}
   <button type="submit" class="btn btn-success">Send</button>
   </form>
</div>

下面是我的 forms.py 文件中的代码。

class TaskModelForm(forms.ModelForm):
    class Meta:
        model= Task
        fields = ['category', 'status', 'points']

    def __init__(self, *args, **kwargs):
        super(TaskModelForm, self).__init__(*args, **kwargs)
        self.fields['status'].required = False
        self.fields['points'].required = False

当我想编辑这个表单的内容时，我需要验证状态是否为Finalized，所以这些字段是不可编辑的，否则这些字段应该是可编辑的，我正在考虑：

{% extends "base.html" %} {% load widget_tweaks %} 
{% block content %}

{% if form.status.value == 'Active' %} <!--make the fields editable -->
<div id="form-group">
    <form method="POST" action="." enctype="multipart/form-data">
    {% csrf_token %}
    <label>Select your category</label> 
        {{ form.category|add_class:"card" }} 
    ...
   <button type="submit" class="btn btn-success">Send</button>
   </form>
</div>
{% endif %}

{% if form.status.value == 'Finalized' %} <!--make the fields non-editable -->
<div id="form-group">
    <form method="POST" action="." enctype="multipart/form-data">
    {% csrf_token %}
    <label>Select your category</label> 
        {{ form.category|add_class:"card" }} 
   ...
   <button type="submit" class="btn btn-success">Send</button>
   </form>
</div>
{% endif %}

但是，我认为我的方法可能行不通，因为这可能是一个更前端的问题，而不是后端问题（只是猜测）。你能指出解决这个问题的正确方向吗？

Answer 1

由于状态是用户选择的，您无法在服务器上使用 Python (Django) 运行来满足您的要求。您必须在显示表单的网页中使用 JavaScript 运行来解决它。这样的事情肯定会成功。

{% extends "base.html" %} {% load widget_tweaks %} 
{% block content %}

<body onload="makeReadOnly();">
  <div id="form-group">
    <form method="POST" action="." enctype="multipart/form-data">
    {% csrf_token %}
        <div class="tweet-composer">
          <label>Insert your task</label>
          {{ form.task|add_class:"card js-keeper-editor" }}
        </div>
         <label>Select your category</label>
          {{ form.category|add_class:"card" }}
        <label>Current points:</label>
          {{ form.points|add_class:"card" }}
        <button type="submit" class="btn btn-success">Send</button>
    </form>
 </div>
</body>
{% endblock content %}

<script type="text/javascript">
{% block jquery %}

 function makeReadOnly()
 {        
  if (document.getElementById('id_status').value == 'Finalized'){
      document.getElementById('id_task').readOnly=true;
      document.getElementById('id_category').readOnly=true;
 }else if (document.getElementById('id_status').value == 'Active'){ 
      document.getElementById('id_task').readOnly=true;
      document.getElementById('id_category').readOnly=false;
  }
 }
 document.getElementById('id_status').addEventListener('change', makeReadOnly);
{% endblock %}
</script>

使用 "view page source" 你可以看到 Django 从你的表单中生成的 HTML 结构，这样你就可以用 JQuery 选择器识别正确的位。或者你可以做

f = SomethingForm()
f.as_p()

在 ./manage.py shell 控制台中。

在 Django 端，您可能需要自定义表单验证来处理状态值与是否需要其他字段之间的相互依赖关系。

当满足特定条件时，如何将 Django 表单中的字段设置为只读？

How do you make the fields read-only in a Django form when a specific condition is met?

javascript

django

django-forms

django-3.0