DJANGO-如何在选中的复选框旁边显示文本表单字段

Question

我正在创建一个应用程序，可让您将预定义服务添加到发票。创建新发票时，可以使用复选框选择服务。我想在选中复选框后添加文本字段以指定数量。因此，您选中该复选框，并在其旁边显示文本字段，您可以在其中输入数量。创建新发票后，我想将此数据存储在数据库中。我不确定如何实现这一目标。我需要JS还是仅Django就足够了？

更新7.06.2020models.py

class Service(models.Model):
    nazwa = models.CharField(max_length=100)
    cena = models.FloatField()

    def __str__(self):
        return f'{self.nazwa} - cena: {self.cena}zł'

class ServiceItem(models.Model):
    usluga = models.ForeignKey(Service, on_delete=models.CASCADE)
    ilosc = models.PositiveIntegerField(default=1)

    def __str__(self):
        return f'{self.usluga.nazwa} - cena: {self.usluga.cena}zł'

class Invoice(models.Model):
    forma_platnosci_wybor = [
        ('przelew', 'przelew'),
        ('gotowka', 'gotówka')
    ]

    numer = models.CharField(max_length=30)
    firma = models.ForeignKey(Company, on_delete=models.CASCADE)
    forma_platnosci = models.CharField(verbose_name='forma płatności', max_length=75, choices=forma_platnosci_wybor)
    data_badania = models.DateField()
    data_wystawienia_faktury = models.DateTimeField()

    rabat = models.IntegerField(verbose_name='rabat [%]', blank=True, null=True)
    uslugi = models.ManyToManyField(ServiceItem, blank=True, null=True)

    def __str__(self):
        return self.numer

forms.py

class NewInvoiceForm(forms.ModelForm):

    class Meta:
        model = Invoice
        fields = '__all__'
        exclude = ['numer', 'data_wystawienia_faktury']
        widgets = {
            'usluga' : forms.CheckboxSelectMultiple,
            'data_badania' : DateInput(),
        }

模板形式

<legend class="col-12">Tworzenie nowej faktury</legend>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <fieldset>
        <div class="form-row">
            <div class="col-lg-4">
                {{ form.firma | as_crispy_field}}
            </div>
        </div>
        <div class="form-row">
            <div class="col-lg-2">
                {{ form.forma_platnosci | as_crispy_field}}
            </div>
            <div class="col-lg-2">
                {{ form.data_badania | as_crispy_field}}
            </div>
        </div>
        <div class="form-row">
            <div class="col-lg-4">
                {{ form.rabat | as_crispy_field}}
            </div>
        </div>
        <div class="form-row">
            <div class="col-lg-4">
                {{ form.uslugi | as_crispy_field }}
            </div>
        </div>
    </fieldset>
        <button type="submit" class="btn btn-info"><i class="far fa-edit"></i> Zatwierdź fakturę</button>
    </form>

ScreenShot

Answer 1

如果我的理解正确，您希望在表单能够正确显示之前单击复选框吗？如果是这种情况，js的想法将必须放置到位

Answer 2

您将需要渲染隐藏的文本字段，并使其在JS中可见，例如，使用复选框上的onclick事件。如果这是表单上的单个事件，可能会很简单；如果它是动态生成的复选框和文本字段的多个事件，则可能会有点困难-但可行。