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

Question

想要根据生成的下拉列表 select 动态 ID 启用文本框。文本框和 Select 框 ID 是动态生成的，例如 amount1、amount2、amount3 并对文本框应用验证，最大金额为 3000。例如：Ehen 用户 select，文本框值中的值为 "Fines" 应允许介于 1 到 3000 和文本之间。如果 select 值与 "Fines" 不同，则不会对文本框进行验证。

我的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;
            } else {
                $('#msg').fadeOut('slow');
                $("#amount" + rowNum).attr('max', '10000');
                $("#amount" + rowNum).attr('min', '1');
                $("#amount" + rowNum).css({"backgroundColor": "#ffffff"});
                toChangeElement.removeAttr('disabled');
                toChangeElement.css('backgroundColor', "#ffffff");
                toChangeElement.focus();
            }
        }
    });
});

My jsfiddle link

Answer 1

你不需要运行那里的循环，我们可以用一种简单的方法解决这个问题

检查 fiddle Here。

截至目前，如果 select 选项的值为 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>

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

Textbox enabled based on Select dynamically and apply validation on textbox

html

jquery

jquery-ui

jquery-plugins