想要启用基于下拉列表选择生成的动态 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 链接
1 回答
慕容森
TA贡献1853条经验 获得超18个赞
您不需要在那里运行循环，我们可以用简单的方法解决这个问题
检查小提琴这里。
截至目前，如果选择选项的值为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 回答
- 0 关注
- 68 浏览
添加回答
举报
0/150
提交
取消