Блог

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

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

#javascript #jquery #django

Вопрос:

Я пробовал несколько способов отключить флажки в форме модели Django. Используя 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>

введите описание изображения здесь

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

Ответ №1:

Просто используйте :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>

Комментарии:

1. Поэтому, если вы можете проверить структуру HTMl на скриншоте, который я опубликовал, input флажок «Для каждого» создается в a p . Где у меня были проблемы, так это с этим. Как я мог бы изменить ваш код, чтобы справиться с этим?

2. Прежде чем я отредактирую свой ответ, не могли бы вы попробовать обернуть свою форму в <div класс=»флажок-контейнер»>. Это должно так работать. Вы также можете изменить или удалить часть jquery, чтобы она выглядела так: $(‘ввод[… но это будет нацелено на ВСЕ флажки на вашем сайте. Вам обязательно следует добавить обертку или использовать существующую. Дайте мне знать, если это помогло

3. Поскольку я должен использовать {{ context.form.as_p }} для создания флажков из формы, каждый input находится в a p . Есть ли лучший способ сделать это?

Метки: ,