Question

我正在尝试清除字段的值，并根据下拉值选择启用/禁用字段。目前启用/禁用字段是有效的，但是当清除字段时它不起作用。我已经附加了我的html代码片段，其中基于状态值，其他字段如sc，sc raise等应该启用。根据状态值更改，应启用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;


    }

});

Answer 1

我在您的代码段中注意到的一件事是您错误地使用了getElementById。

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

作为参数，您应该提供不带#的ID。

Answer 2

要从输入中删除值，请使用jquery val()函数将空字符串作为aprama传递

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

Answer 3

这里有一个解决方案

＆＃13;

$('#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;
  }
});

＆＃13;

希望这可以帮助您解决问题＆amp;减少代码行数。

Answer 4

使用更改的内容 - $（＆＃39; #Status＆＃39;）。change（function（）使用 - $('#Status').on('change',function() {})并清除值使用

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

而不是document.getElementById（＆＃34;＃PO＆＃34;）。value =＆＃34;＆＃34 ;;如前面提到的mic4ael，无需在javascript代码中使用＃选择。

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

4 个答案: