首页 > 解决方案 > 如何在 JS 中使用 if-else 条件禁用字段

问题描述

在某些情况下,我在禁用输入字段时遇到问题。在这种情况下,用户可以在表单中添加多行。但是,行数大于四,则某些字段将被禁用。这是我的 JavaScript 片段。为了知道行数是否已经超过,我使用索引号进行检查。

但问题是,代码似乎没有检查if-else条件。

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);
            }
        });
});

这里是 HtML 代码段:

<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 %}

实际上,如果我删除document.getElementById. 但是由于很少有不同条件的字段,所以我需要通过 . 来区分每个按钮Id

我已经试过用了.attr("disabled", true)也没用

如果我错了,请纠正我。提前感谢您的帮助和时间。

标签: javascriptjquerydjango

解决方案


推荐阅读