Блог

У меня есть динамическая таблица, использующая for-loop в шаблоне django, она содержит флажок в каждой строке, который я хочу обновить как отмеченный или снятый с объекта boolean model, который уже доступен в шаблоне, при загрузке страницы. У меня есть код на шаблоне в виде:

     <tbody id="order_list_body">
{% for item in items %}
  <tr height="50px">
  <td align="center">
    {{item.item}}
  </td>
  <td align="center">
    {{item.price}}
  </td>
  <td align="center">
    {{item.stock}}
  </td>
  <td align="center">
    <input type="checkbox" id="available" name="available" >
    {{item.available}}
  </td>
  <td align="center">
    <a href="{% url 'order' %}" class="btn btn-info">Edit</a>
    <a href="{% url 'order' %}" class="btn btn-warning" >Delete</a>
  </td>
</tr>



    //jquery to update the checkbox with the 'item.available' boolean
     <script>
$(document).ready(function(){
        if ('{{item.available}}' == 'True'){
            $('#available').prop('checked', true);
            console.log("checked {{item.item}} as {{item.available}} in the true loop");
        }

        else if ('{{item.available}}' == 'False'){
            $('#available').prop('checked', false);
            console.log("checked {{item.item}} as {{item.available}} in the false loop");
        }
});


</script>

{% endfor %}
 

Но почему-то javascript не обновляет флажки в соответствии с логическим значением ‘item.available’ при загрузке страницы.

консоли.журнал дает :

 checked item1 as True in the true loop
(index):197 checked item2 as False in the false loop
(index):270 checked item4 as True in the true loop
(index):353 checked item6 as False in the false loop
 

и javascript в исходном коде chrome показывает, что для item1, помеченного как true, это :

 <script>
$(document).ready(function(){
        if ('True' == 'True'){
            $('available').prop('checked', true);
            console.log("checked item1 as True in the true loop");
        }
 

Может кто-нибудь, пожалуйста, сказать мне, почему $('#available').prop('checked', true) это не вступает в силу и показывает флажок, который уже установлен при загрузке страницы.
Если мои сомнения требуют более подробной информации, пожалуйста, дайте мне знать и заранее спасибо.

Вам не нужно использовать скрипт, чтобы установить флажок, когда значение равно True, вы можете сделать это встроенным ниже приведен фрагмент ({% if item.available %} проверено {% endif %})

 {% for item in items %}
  <tr height="50px">
  <td align="center">
    {{item.item}}
  </td>
  <td align="center">
    {{item.price}}
  </td>
  <td align="center">
    {{item.stock}}
  </td>
  <td align="center">
    <input type="checkbox" id="available" name="available" {% if item.available %} checked {% endif %} >
    {{item.available}}
  </td>
  <td align="center">
    <a href="{% url 'order' %}" class="btn btn-info">Edit</a>
    <a href="{% url 'order' %}" class="btn btn-warning" >Delete</a>
  </td>
</tr>

{% endfor %}