Текстовое поле включено на основе Выбрать динамически и применить проверку к текстовому полю

Question

Хотите включить текстовое поле на основе выпадающего списка, выберите динамический c сгенерированный идентификатор. Идентификатор текстового поля и поля выбора генерируется динамически, например .. сумма1, сумма2, сумма3, и применяется проверка к текстовому полю с максимальной суммой 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;
            } 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();
            }
        }
    });
});     

Моя ссылка jsfiddle

Answer 1

Вам не нужно запускать здесь al oop, мы можем это легко исправить

проверить скрипку Здесь .

На данный момент, если значение из опции выбора равно 10, тогда только вход станет активным. Вы можете добавить свою логику c также здесь.

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>