时间戳

首页 > 解决方案 > 当满足特定条件时，如何使 Django 表单中的字段只读？

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

问题描述

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

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

标签： javascriptdjangodjango-formsdjango-3.0

解决方案

由于状态是用户选择的，因此您无法使用在服务器上运行的 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 端，您可能需要自定义表单验证来处理状态值与是否需要其他字段之间的相互依赖关系。

推荐阅读