Django - как создать поле формы, содержащее чекбоксы С текстовым полем ввода 'Other'

Я создаю форму в Django и хочу предоставить пользователям список флажков с возможностью выбора текстового ввода Other _____ в качестве одного из вариантов. Вот мой код, использующий MultipleChoiceField и CheckboxSelectMultiple:

class IntakeFormSimple(Form):
    def __init__(self, *args, **kwargs):
        super(IntakeFormSimple, self).__init__(*args, **kwargs)

    preferred_pronouns = forms.MultipleChoiceField(
        choices=(("she/her", "she/her"), ("he/him", "he/him"), ("they/them", "they/them")),  # <--- add "Other" here
        label="What are your preferred pronoun(s)?",
        widget=forms.CheckboxSelectMultiple,
    )

Вам необходимо использовать CharField или TextField вместо MultipleChoiceField. Затем необходимо создать пользовательский виджет, который представляет собой комбинацию виджетов MultipleSelect и TextInput. Я предлагаю использовать MultiWidget для объединения этих двух виджетов вместе (https://docs.djangoproject.com/en/4.0/ref/forms/widgets/#multiwidget) и добавить флажок "Other" чисто декоративно, который использует некоторые JS для включения/выключения ввода текста. Для этого вам нужно будет использовать пользовательский шаблон виджета.

Я подозреваю, что вам также придется переопределить класс поля, чтобы заставить его работать с вашим пользовательским виджетом.

Надеюсь, я направил вас в правильном направлении.

Добавьте поле "другое" в вашу форму:

class IntakeFormSimple(Form):
def __init__(self, *args, **kwargs):
    super(IntakeFormSimple, self).__init__(*args, **kwargs)

preferred_pronouns = forms.MultipleChoiceField(
    choices=(("she/her", "she/her"), ("he/him", "he/him"), ("they/them", "they/them", "other")), 
    label="What are your preferred pronoun(s)?",
    widget=forms.CheckboxSelectMultiple,
)

Теперь в файле javascript скройте этот ввод при загрузке страницы:

$("#user-input-textbox").hide();

Наконец, используйте радиокнопку 'other', когда она отмечена, и скройте ее, когда она не отмечена, а также очистите существующее значение перед скрытием:

    $('#Other').click(function(){
        if ($(this).is(':checked')){
            $("#user-input-textbox").show();
        }
        else{
             $("#user-input-textbox").html('');
             $("#user-input-textbox").hide();
        }
    });
Вернуться на верх