根據下拉選擇清除和啓用/禁用字段

我想清除字段的值，並根據下拉值選擇啓用/禁用字段。目前啓用/禁用的字段正在工作，但當它來清除該領域的不工作。我已經附加了從我的HTML代碼的基於狀態值的其他字段像sc，sc提出等應啓用片段。根據狀態值更改，prev啓用字段應清除。甚至提交按鈕應基於它啓用。任何幫助？根據下拉選擇清除和啓用/禁用字段

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; 


    } 

});

來源

2017-08-09 user1967685

在這裏，你用溶液

$('#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').on('change',function() {})和清除值使用

$('#PO').val("")

，而不是的document.getElementById（「＃PO」使用變化的

來源

2017-08-09 06:38:14 Shiladitya

即使我輸入值到SCRaised和SC中，提交併未啓用。 :)任何幫助以上問題 – user1967685

請添加console.log裏面if語句和che如果它是在if語句裏面的話。 – Shiladitya

我已經編輯了答案，現在看看。 – Shiladitya

的一兩件事，我在您的代碼段注意到的是，你正在使用getElementById不正確。

document.getElementById("#PO").value = "";

作爲參數，您應該提供沒有#的ID。

來源

2017-08-09 06:28:55 mic4ael

要刪除一個輸入值使用的jquery val()函數傳遞一個空字符串作爲aprama

$('#SCRaised').val('');

來源

2017-08-09 06:36:02 madalinivascu

支架內）.value =「」;前面提到mic4ael沒有必要使用＃在JavaScript代碼中的選擇

來源

2017-08-09 06:38:20

根據下拉選擇清除和啓用/禁用字段

回答

相關問題