基于动态选择启用文本框并对文本框应用验证

Question

想要启用基于下拉列表选择生成的动态 ID 的文本框。文本框和选择框 ID 是动态生成的，例如 amount1、amount2、amount3，并对文本框应用验证，最大金额为 3000。例如：当用户选择时，文本框中的“罚款”值应允许 1 到 3000 之间的文本。如果选择“罚款”以外的值，则不对文本框进行验证。

我的 JavaScript 代码：

var $ = jQuery;

$(document).ready(function() {

  $('.amount').attr('disabled', true);

  $(".amount").css({ "backgroundColor": "#eee" });

});

$(document).ready(function () {

    $('input[name=amount]').keyup(function () {

        var total_items = 100;

        for (rowNum = 1; rowNum <= total_items; rowNum++) {

            var selectvl = $("#exp_id" + rowNum).val();

            if (selectvl == '10') {

                if ($(this).val() < 3001 && $(this).val() > 1) {

                    $('#msg').fadeOut('slow');

                } else {

                    $('#msg').fadeIn('slow');

                }

                } 

            }   

    });

    $('body').on('change', '.exp_id', function () {

        var total_items = 100;

        for (rowNum = 1; rowNum <= total_items; rowNum++) {

        const toChangeElement = $(event.target).parent().next().children();

            const exp_id = event.target.value;

            if (this.value == '10') {

                $("#amount" + rowNum).attr('max', '3000');

                $("#amount" + rowNum).attr('min', '1');

                $('#msg').fadeIn('slow');

                $("#msg").html("Enter amount below AED 3000. !!");

                $("#amount" + rowNum).css({ "backgroundColor": "#ffffff" );

                toChangeElement.removeAttr('disabled');

                toChangeElement.css('backgroundColor', "#ffffff");

                toChangeElement.focus();

                return false;

            }

            }

        }

    });

});     

我的 jsfiddle 链接

Answer 1

您不需要在那里运行循环，我们可以用简单的方法解决这个问题检查小提琴这里。截至目前，如果选择选项的值为10，则只有输入将被启用。您也可以在这里添加逻辑。var $ = jQuery;$(document).ready(function() {&nbsp; $('.amount').attr('disabled', true);&nbsp; $(".amount").css({&nbsp; &nbsp; "backgroundColor": "#eee"&nbsp; });});function updateCheckBox() {&nbsp; var total_items = 100;&nbsp; const toChangeElement = $(event.target).parent().next().children();&nbsp; const exp_id = event.target.value;&nbsp; if (exp_id == '10') {&nbsp; &nbsp; toChangeElement.removeAttr('disabled');&nbsp; &nbsp; toChangeElement.css('backgroundColor', "#ffffff");&nbsp; &nbsp; toChangeElement.focus();&nbsp; } else {&nbsp; &nbsp; toChangeElement.val('');&nbsp; &nbsp; toChangeElement.attr('disabled', 'disabled');&nbsp; &nbsp; toChangeElement.css('backgroundColor', "#eee");&nbsp; }&nbsp; /* for (var rowNum = 1; rowNum <= total_items; rowNum++) {&nbsp; &nbsp; exp_id = $('#exp_id' + rowNum).val();&nbsp; &nbsp; if (exp_id == '10') {&nbsp; &nbsp; &nbsp; $('#amount' + rowNum).attr('disabled', false);&nbsp; &nbsp; &nbsp; $("#amount" + rowNum).css({ "backgroundColor": "#ffffff" });&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; $('#amount' + rowNum).attr('disabled', false);&nbsp; &nbsp; &nbsp; $("#amount" + rowNum).css({ "backgroundColor": "#ffffff" });&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; }&nbsp; } */}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script><div class="container">&nbsp; <div class="row">&nbsp; &nbsp; <div class="col-sm-6">&nbsp; &nbsp; &nbsp; <div class="bs-example">&nbsp; &nbsp; &nbsp; &nbsp; <form id="sendform" method="post" action="#" autocomplete="off">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <table class="table table-bordered">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Select</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th>Amount</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="exp_id1" class="form-control exp_id" required name="exp_id" onchange="updateCheckBox()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="" selected disabled>Select one</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">Fines</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="11">Medical</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="12">Parking</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="number" name="amount" class="form-control amount" id="amount1"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="exp_id2" class="form-control exp_id" required name="exp_id" onchange="updateCheckBox()">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="" selected disabled>Select one</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="10">Fines</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="11">Medical</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="12">Parking</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td><input type="number" name="amount" class="form-control amount" id="amount2"></td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </table>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="checkbox">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="msg" style="color:#990000; font-size:14px;"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="submit" name="submit_row" value="Submit" class="btn btn-primary">SUBMIT</button>&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>&nbsp; </div></div>