Как правильно использовать Jquery для отключения флажков в форме Django, когда определенное количество из них отмечено флажками

Я пробовал несколько способов отключения флажков в Django ModelForm. Используя Jquery, я смог написать код, который отключает флажки, когда определенное число отмечено, но он также отключает те, которые были отмечены. Мне нужен динамический способ установки и снятия флажков и блокировки только тех флажков, которые не были установлены, когда достигается предел.

Это мой JS:

function checkBoxes() {
    
        $(' input[type=checkbox]').
            attr('disabled', true);
  
        
        $(document).on('click', 
            'input[type=checkbox]',
            function (event) {
  
                
                if ($(this).is(":checked")) {
                    console.log("1")
                } else {
  
                    
                    console.log('2')
                }
            });
  }

Проблема, с которой я пытаюсь разобраться, заключается в том, как проверить, был ли флажок установлен или нет, поскольку я создаю список флажков с помощью Django:

<div style="height:30px"></div>
<form method="post">
    {% csrf_token %}
    {{ context.form.as_p }}
    <button type="submit">Submit</button>
</form>

enter image description here

Как я могу исправить свой JS и иметь возможность включать и выключать флажки динамически, то есть, когда достигнут лимит, отключить все не отмеченные флажки, а когда лимит уменьшится, позволить флажкам снова быть нажатыми?

Просто используйте :checked и :not(:checked) в селекторе jquery, вот так:

$(document).on('click', 'input[type=checkbox]', function(event) {
  if ($('.checkbox-container input[type=checkbox]:checked').length >= 3) {
    $('.checkbox-container input[type=checkbox]:not(:checked)').attr('disabled', true);
  } else($('.checkbox-container input[type=checkbox]').attr('disabled', false));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>

<body>
  <div class="checkbox-container">
    <input type="checkbox" id="scales1" name="scales1" checked>
    <input type="checkbox" id="scales2" name="scales2" checked>
    <input type="checkbox" id="scales3" name="scales3">
    <input type="checkbox" id="horns1" name="horns1">
    <input type="checkbox" id="horns2" name="horns2">
    <input type="checkbox" id="horns3" name="horns3">
  </div>

</body>

</html>

Вернуться на верх