当满足特定条件时，如何使 Django 表单中的字段只读？答案

【问题标题】：How do you make the fields read-only in a Django form when a specific condition is met?当满足特定条件时，如何使 Django 表单中的字段只读？
【发布时间】：2020-01-13 23:35:15
【问题描述】：

根据下图，当任务状态为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

当我想编辑此表单的内容时，我需要验证状态是否为已完成，因此字段不可编辑，否则字段应该是可编辑的，我正在考虑：

{% 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 %}

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

【问题讨论】：

标签： javascript django django-forms django-3.0

【解决方案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>

通过“查看页面源代码”，您可以看到 Django 从您的表单中生成的 HTML 结构，以便您可以使用 JQuery 选择器识别正确的位。或者你可以做

f = SomethingForm()
f.as_p()

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

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

【讨论】：