How to disabled field with if-else condition in JS

Question

I have a problem on disabled input field on certain condition. In this case, user can add multiple row in a form. But, the number of row is greater than four, then some of the field will be disabled. Here my segment of JavaScript. In order to know the number of row already exceed or not, I check using index number.

But the problem is, the code seems like didn't check the if-else condition.

var valIndex =0;
    for (var i=0, formCount=forms.length; i<formCount; i++) {
        valIndex = i+1;

        $(forms.get(i)).find('.assign_label_number').text(" - " + valIndex +  nth(valIndex));
        console.log(valIndex);
        
        document.getElementById("gift").addEventListener("click", function(){
            var gift = $(forms.get(i)).find('input[id^=id_Phone1][id$=less_tax_examption]');
            if(valIndex => 4){
                console.log('disabled')
                gift.prop("disabled", true);
            }
            
            else{
                console.log('enable')
                gift.prop("disabled", false);
            }
        });
});

Here the HtML code segment:

<div id="giftoftelpagerpda-dynamic">
{{ phoneformset.management_form }}
{% for phone in phoneformset %}
<div class="phone1form-row mb-4">

<div class="row m-2">
    <div class="col-sm">
        <label class="">Gift of Telephone/ Mobile Phone/ Pager and PDA</label>
        <label><span class="assign_label_number" id="id_Phone1-0-label_number"></span></label>
    </div>
    {% if phoneformset.can_delete %}
        {{ phone.DELETE | add_class:"invisible"}}
    {% endif %}
    <button id="gift" style="" class="btn btn-success btn-dynamic-xs add-form-row phone1formbutton" type="button"> <span class="fas fa-plus" aria-hidden="true"></span> </button>
    {{ phone.apb_fields.as_hidden }}
    {{ phone.description.as_hidden }} 
    {{ phone.apbid.as_hidden }}
    <div class="col col-lg-2">
        <div>
            {{ phone.value_before_tax }}
        </div>
    </div>
    <div class="col col-lg-2">
    </div>
</div>
<div class="row m-2">
    <div class="col-6 col-md-4">
        <label class="">Less: Tax Exemption</label>
    </div>
    <div class = "col-lg-2"></div>
    <div class = "col-lg-2"></div>
    <div class="col-6 col-lg-2">
        {{ phone.less_tax_examption }}
    </div>
</div>
<div class="row m-2">
    <div class="col-sm">
    </div>
    <div class="tarfnl2 col col-lg-2">
        {{ phone.apb_value | attr:"readonly:readonly" }}
    </div>
</div>
</div>
{% endfor %}

Actually it work just fine if I remove the document.getElementById. But since there is few field with different condition, so I need to differentiate each of the button by Id.

I already tried to used .attr("disabled", true) also didn't work

Please correct me if I'm wrong. Thank you in advanced for your help and time.

Would you make a jsfiddle or codepen with your code? It can be useful to see the html — Ale Plo, Oct 21 '20 at 05:29
please add relevant html to understand the problem statement correctly — Bhushan Kawadkar, Oct 21 '20 at 05:32
Do your element have an ID that contains both `id_Phone1` and `less_tax_examption` ? — Carsten Løvbo Andersen, Oct 21 '20 at 05:41
@BhushanKawadkar i already add the relevent html code segment — jat, Oct 21 '20 at 06:01
Does this help? https://stackoverflow.com/questions/6048022/jquery-attrdisabled-disabled-not-working-in-chrome — react_or_angluar, Oct 21 '20 at 06:04
@AlePlo Im not sure is it possible or not since im using crispy. — jat, Oct 21 '20 at 06:04
@jat `find('input[id^=id_Phone1][id$=less_tax_examption]')` is looking for an element that looks like this `` and you dont have that — Carsten Løvbo Andersen, Oct 21 '20 at 06:05
@natel i already tried the solution on that page as well but didn't work — jat, Oct 21 '20 at 06:10
@CarstenLøvboAndersen actually i have that element in form.py file. less_tax_examption=forms.CharField(required=False,widget=forms.TextInput( attrs= { "class":"converamt textinput textInput form-control commanumber class_less_tax_examption", })) — jat, Oct 21 '20 at 06:13
@jat `class_less_tax_examption` is your class not id you write `[id$=less_tax_examption]` — Carsten Løvbo Andersen, Oct 21 '20 at 06:18

How to disabled field with if-else condition in JS

0 Answers0