JavaScript Атрибут только для чтения не работает

Question

В моем коде есть поле для чтения только для чтения, однако оно просто затеняет поле, и поле все еще можно редактировать. Что я здесь не так делаю?

Поля, которые я здесь использую, являются Django хрустящими полями в моей форме.

Код для формы

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

    <script>
      const student_name = "{{student_id}}";
      var studentnamedropdown = document.getElementById('id_student_name');
      for (i = 0; i < studentnamedropdown.options.length; i++) {
      // if(studentnamedropdown.options[i].text == "Ray Zuchowski")
      if(studentnamedropdown.options[i].text == student_name)
      {
      console.log(studentnamedropdown.options[i].text)  
      $("#id_student_name").val(studentnamedropdown.options[i].value)
      $("#id_student_name").attr('readonly', 'readonly')

       }
      }
    </script>  

Answer 1

Я думаю, что здесь есть некоторая путаница с jQuery .attr и .prop.

В простом JavaScript это будет

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

Answer 2

Установить readOnly с помощью

$("#test").prop("readOnly", true)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="x" id="test" />