根据下拉选择清除和启用/禁用字段

我想清除字段的值，并根据下拉值选择启用/禁用字段。目前启用/禁用的字段正在工作，但当它来清除该领域的不工作。我已经附加了从我的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

根据下拉选择清除和启用/禁用字段

回答

相关问题