JavaScript只读属性不工作

我的代码中有一个字段是只读的，但是它只是使字段变灰，并且该字段仍然可以编辑。我做错了什么

我在表单中使用的字段是Django crispy字段

表格的代码

 <form action="" method="POST">
       {% csrf_token %} 
      <div class="row"> 
        <div class="col-3">
          {{form.class_name|as_crispy_field }} 
          </div>
        <div class = "col-3">
          {{form.date|as_crispy_field }}
          </div>
        <div class = "col-3">
        {{form.week_of|as_crispy_field }}
          </div>
          <div class = "col-3">
             {{form.day|as_crispy_field }}
             </div>
       </div>
        <div class="row"> 
        <div class="col-3">  
          {{form.student_name|as_crispy_field }} 
          </div>
         <div class = "col-3"> 
          {{form.time_frame|as_crispy_field }}
        </div>
        <div class = "col-3">
        {{form.behavior|as_crispy_field }}
         </div>
         <div class="col-3" >
        {{form.academic|as_crispy_field }}
         </div>
         </div>
         <div class="row">
         <div class = "col-3">
             <button type="submit" class="btn btn-success" ><i
                class="fas fa-star"></i> Level Up</button>
      </form>
                 </div>
                  </div>

</div>    

{%csrf_令牌%}
{{form.class_name}as_crispy_field}
{{form.date}as|u crispy_field}
{{form.week|as|u crispy_field}
{{form.day}as|u crispy_field}
{{form.student|u name|as_crispy_field}
{{form.time|u frame|as_crispy_field}}
{{form.behavior}as_crispy_field}
{{form.academic}as|u crispy_field}
升级

const student_name=“{{student_id}}”；
var studentnamedropdown=document.getElementById（'id_student_name'）；
对于（i=0；i

使用prop设置只读

$（“#测试”）.prop（“只读”，true）

---

我认为jQuery

.attr

和

.prop

在这里出现了一些混淆

在纯JavaScript中，它将是

document.getElementById('id_student_name').readOnly = true

---

“但是它只是使字段变灰”好的，那么问题是什么呢？一些浏览器使“只读”字段变灰。我认为Firefox会，但Chrome不会。请参阅：我仍然可以编辑该字段。我不想编辑它。我也尝试了prop方法，该字段将不再是灰色的，仍然可以编辑。它在snipplet中运行良好，因此不确定有什么不同。区别在于我使用的是django表单字段，而不是reg html字段。“而不是reg html字段。”这些字段是什么？当你问问题的时候，你需要详细说明这些东西。是的，那是我的错，我忘了写。我现在添加了它。这在我的其他脚本中以这种方式工作，使用reg javascript。但是在当前发布的脚本中没有成功地做到这一点。这很奇怪。这绝对有效。您可以在控制台中检查

document.getElementById（'id\u student\u name'）的输出。可能是其他框架篡改了它？不同的是这些字段是关系字段，它们是下拉列表。所以我不知道这是否有区别。
document.getElementById('id_student_name').readOnly = true