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

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() {

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

  $(".amount").css({

    "backgroundColor": "#eee"

  });

});

function updateCheckBox() {

  var total_items = 100;

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

  const exp_id = event.target.value;

  if (exp_id == '10') {

    toChangeElement.removeAttr('disabled');

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

    toChangeElement.focus();

  } else {

    toChangeElement.val('');

    toChangeElement.attr('disabled', 'disabled');

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

  }

  /* for (var rowNum = 1; rowNum <= total_items; rowNum++) {

    exp_id = $('#exp_id' + rowNum).val();

    if (exp_id == '10') {

      $('#amount' + rowNum).attr('disabled', false);

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

      return false;

    

    } else {        

      $('#amount' + rowNum).attr('disabled', false);

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

      return false;

    }

  } */

}

<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">

  <div class="row">

    <div class="col-sm-6">

      <div class="bs-example">

        <form id="sendform" method="post" action="#" autocomplete="off">

          <table class="table table-bordered">

            <thead>

              <tr>

                <th>Select</th>

                <th>Amount</th>

              </tr>

            </thead>

            <tbody>

              <tr>

                <td>

                  <select id="exp_id1" class="form-control exp_id" required name="exp_id" onchange="updateCheckBox()">

                    <option value="" selected disabled>Select one</option>

                    <option value="10">Fines</option>

                    <option value="11">Medical</option>

                    <option value="12">Parking</option>

                  </select>

                </td>

                <td><input type="number" name="amount" class="form-control amount" id="amount1"></td>

              </tr>

              <tr>

                <td>

                  <select id="exp_id2" class="form-control exp_id" required name="exp_id" onchange="updateCheckBox()">

                    <option value="" selected disabled>Select one</option>

                    <option value="10">Fines</option>

                    <option value="11">Medical</option>

                    <option value="12">Parking</option>

                  </select>

                </td>

                <td><input type="number" name="amount" class="form-control amount" id="amount2"></td>

              </tr>

            </tbody>

          </table>

          <div class="checkbox">

            <div id="msg" style="color:#990000; font-size:14px;"></div>

          </div>

          <br>

          <button type="submit" name="submit_row" value="Submit" class="btn btn-primary">SUBMIT</button>

        </form>

      </div>

    </div>

  </div>

</div>