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

Question

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

更新 7.06.2020 模型.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

如果我理解正确，您希望在表单能够出现之前单击复选框吗？如果是这样的话jsidea就得落实到位

Answer 2

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