想要啟用基于下拉列表選擇生成的動態 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 關注
- 129 瀏覽
添加回答
舉報
0/150
提交
取消