[英]clear and enable/disable fields based on drop down selection
我正在嘗試清除字段的值,並根據下拉值選擇啟用/禁用字段。 當前啟用/禁用該字段正在工作,但是當要清除該字段時,它不工作。 我已經附上了我的html代碼中的代碼段,其中應根據狀態值來啟用其他字段(例如sc,sc凸起等)。 根據狀態值更改,prev enabled字段應清除。 甚至應基於它啟用提交按鈕。 有什么幫助嗎?
HTML代碼段:
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-lg-4">Status:<span class="Imp">*</span></label>
<div class="col-lg-8">
@Html.DropDownList("Status", new SelectListItem[] { (new SelectListItem() { Text = "SC", Value = "SC" }), (new SelectListItem() { Text = "PO", Value = "PO" }), (new SelectListItem() { Text = "INV", Value = "INV" }) }, "-- Select Status --", new { @class = "form-control", id = "Status" })
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-lg-4">SC Raised:<span class="Imp">*</span></label>
<div class="col-lg-8">
<div class='input-group date' id='SCRaisedDatePicker'>
<input type='text' class="form-control" name="SCRaised" placeholder="MM/DD/YYY" id="SCRaised" />
<span class="input-group-addon">
<span class="fa fa-calendar">
</span>
</span>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-lg-4">SC:<span class="Imp">*</span></label>
<div class="col-lg-8">
@Html.TextBoxFor(model => model.detailsConfig.SC, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "SC" })
</div>
</div>
</div>
</div>
<div class="row top-buffer">
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-lg-4">PO#:<span class="Imp">*</span></label>
<div class="col-lg-8">
@Html.TextBoxFor(model => model.detailsConfig.PO, new { onkeypress = "return isNumberKey(event)", @class = "form-control", id = "PO" })
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="control-label col-lg-4">PO Out:<span class="Imp">*</span></label>
<div class="col-lg-8">
<div class='input-group date' id='PODatePicker'>
<input type='text' class="form-control" name="POOut" placeholder="MM/DD/YYY" id="POOut" />
<span class="input-group-addon">
<span class="fa fa-calendar">
</span>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="btnSubmit" value="Submit" class="btn btn-lg btn-success" />
</div>
Java腳本代碼:
$('#Status').change(function() {
switch ($(this).find('option:selected').text()) {
case '-- Select Status --':
$('#SCRaised').prop('disabled', true);
$('#SC').prop('disabled', true);
$('#PO').prop('disabled', true);
$('#POOut').prop('disabled', true);
break;
case 'SC':
$('#SCRaised').prop('disabled', false);
$('#SC').prop('disabled', false);
document.getElementById("#PO").value = "";
document.getElementById("#POOut").value = "";
$('#PO').prop('disabled', true);
$('#POOut').prop('disabled', true);
if ($('#SCRaised').val().length > 0 && $('#SC').val().length > 0) {
$("input[type=submit]").prop("disabled", false);
}
break;
case 'PO':
$('#PO').prop('disabled', false);
$('#POOut').prop('disabled', false);
$('#SCRaised').val() = "";
$('#SC').val() = "";
$('#SCRaised').prop('disabled', true);
$('#SC').prop('disabled', true);
$('#ItemArrival').prop('disabled', true);
if ($('#PO').val().length > 0 &&
$('#POOut').val().length > 0)
{
$("input[type=submit]").prop("disabled", false);
}
break;
}
});
我在您的代碼段中注意到的一件事是您使用了不正確的getElementById
。
document.getElementById("#PO").value = "";
作為參數,您應提供不帶#
的id。
要從輸入中刪除值,請使用jQuery val()
函數傳遞一個空字符串作為aprama
$('#SCRaised').val('');
給您一個解決方案
$('#Status').change(function () { switch($(this).find('option:selected').text()){ case '-- Select Status --': $('#SCRaised, #SC, #PO, #POOut').prop('disabled',true); break; case 'SC' : $('#SCRaised, #SC').prop('disabled', false); $("#PO, #POOut").val(''); $('#PO, #POOut').prop('disabled', true); if ($('#SCRaised').val().length > 0 && $('#SC').val().length > 0) { $("input[type=submit]").prop("disabled", false); } break; case 'PO' : $('#PO, #POOut').prop('disabled', false); $('#SCRaised, #SC').val(''); $('#SCRaised, #SC, #ItemArrival').prop('disabled', true); if( $('#PO').val().length > 0 && $('#POOut').val().length > 0){ $("input[type=submit]").prop("disabled", false); } break; } });
希望這將幫助您解決問題並減少代碼行數。
意圖使用更改-$('#Status')。change(function()用於- $('#Status').on('change',function() {})
並用於清除值
$('#PO').val("")
而不是document.getElementById(“#PO”)。value =“”; 如mic4ael先前所述,無需在JavaScript代碼中使用#選擇。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.