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

Posted 2023-05-08

【中文标题】基于动态选择启用文本框并对文本框应用验证

【英文标题】：Textbox enabled based on Select dynamically and apply validation on textbox

【发布时间】：2020-06-18 00:40:07

【问题描述】：

希望根据生成的下拉选择动态 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;
             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

【参考方案1】：

您不需要在那里运行循环，我们可以轻松解决此问题

检查小提琴Here。

到目前为止，如果选择选项的值为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>

【讨论】：

谢谢你，很抱歉我问的问题有点不同，我已经更新了我的提琴手。要求是当用户选择时，文本框值中的“罚款”值应允许在 1 到 3000 和文本之间。如果选择“罚款”以外的值，则在文本框上不进行验证。

Revised fiddle

当用户选择那个特定的选择框时，只有下一个文本框应该启用而不是全部..

@Rakesh sohe 你怎么也得花点力气，用新的方法来解决以前的问题来更新问题就像让别人做你的家庭作业。

我也更新了问题，看看你能不能帮助我。谢谢