CODEWITHSUNDEEP
pythondjangoformsdjango-templatesfrontend
Adrian Kurzeja
Adrian Kurzeja

Reputation: 868

How to disable checkbox after change in another field in django template?

I'm junior backend python dev (Django) but I have to do "easy" frontend task. I think it is easy but not for me because my frontend ends on F :(

I'm using bootstrap in this app.

I have a form field with some fields, two of them are checkbox named 'checkbox_1' and number field for price named 'price_1'.

Checkbox on True means "Product is free" so...

If checkbox_1 is True, field of 'price_1' should go disabled so I can't write on it. If 'price_1' is 0 and 'checkbox_1' is False, than it shows a message "Price can't be 0 if product is not free".

I have tried with django templates using if statement like this:

<form action="index.html" method="POST">
    <div class="form-group">
        <label class="control-label">{{ form.price.label }} </label>
        {{ form.price }} EUR
    </div>
    <div class="checkbox m-b-14">
        <label>{{ form.free_product }} <i>/</i> {{ form.free_product.label }}</label>

        <!--AND HERE IS MY TRY-->
        {% if form.price.value == 0 %}
            TEST Price 0
        {% else %}
            TEST price is bigger than 0
        {% endif %}
    </div>
</form>

It works only after first enter the page. I think I have to use JS? Or maybe there is possibility to do it in bootstrap or django templates?

Even if my example would work I still don't know how to pass "required" or "disabled", at runtime... in the moment that You click on checkbox.

That's black magic for me I event don't know how to search for it correctly ;/

Can you please help me what I can do here to make it work?

I will be extremely grateful...

Upvotes: 1

Views: 2398

Answers (1)

Diego Vin&#237;cius
Diego Vin&#237;cius

Reputation: 2243

You cant do it with django, because django have syncronous call... so to you get any response from django again you need make a new request or refresh your page... since you need something dinamic, you should use Javascript to do that.

document.getElementById('yourBox').onchange = function() {
    document.getElementById('yourText').disabled = !this.checked;
};

<input type="text" id="yourText" disabled />
<input type="checkbox" id="yourBox" />

Upvotes: 1

Related Questions