Question

我有一个名为“ transactionType”的选择框，它启用/禁用了另一个选择框“ itemPrice”。这两个项目都是必填字段。

一切都很好。但是在IE中，当我们选择值为“”的第一个选项“请选择”时，验证将无法进行。它似乎接受了该值，而没有将红色文本更新为“必填”。我尝试了不同的方法。当我调用$（this）.valid（）时，“ TransactionType”会正确更新，但是我的“ itemPrice”却无法正确启用或禁用。

就像此处的示例jQuery select box validation一样，我无法在“提交”上进行操作。我必须这样做，因为它们会更改选择框中的“选择”。

$(document).ready(function () {

  $("#TransactionType").validator({ // initialize the plugin
      rules: {
          TransactionType: {
              selectcheck: true
          }
      }
  });

  jQuery.validator.addMethod('selectcheck', function (value) {
      return (value != '');
  }, "You must choose an item from the list.");
  
  // set up "transaction type" change event
  $(this).find ('#TransactionType').change(function () {

        //Show or Hide SalesPrice depending on TransactionType
        UpdateSalesPrice($orderEntryForm);
        event.srcElement.blur();
    });

});


function UpdateSalesPrice($form)
{
    var transtype = $form.find("#TransactionType").val().toLowerCase();
    // Selling Price field is irrelevant for Refinance transaction
    // Thus disable the control and stop validating
    if ($("#SellingPrice").length > 0) {

        var parent = $("#SellingPrice").parent();
        var child2 = parent.find("i").eq(1);

        if (transtype == "refinance" || transtype == "equity") {
            $("#SellingPrice").prop("disabled", true);
            $("#SellingPrice").attr("data-validate", false);
            $("#SellingPrice").val('');

            if (child2.length > 0 && document.getElementById("SellingPrice").required)
                child2.removeClass();
        }
        else {
            $("#SellingPrice").prop("disabled", false);
            $("#SellingPrice").attr("data-validate", true)
            if (child2.length > 0 && document.getElementById("SellingPrice").required)
                child2.removeClass().addClass('fa fa-asterisk');
        }
        // Reset validation of Transaction Information section
        var txControls = $("#SellingPrice");
        txControls.validator("update");
        txControls.validator("validate");
    }
}

<div class="row" id="transactionInformation_row_10">
  <label class="col-xs-2 control-label ta-r" for="_TransactionType">Transaction Type</label>
  <div class="col-sm-4 col-xs-10 form-group has-error has-danger">
    <div class="input-group"><select name="TransactionType" class="form-control" id="TransactionType" required="" data-bind="value:TransactionType">
      <option value="">Select Transaction Type</option>
      <option value="Purchase">Purchase</option>
      <option value="Other">Foreclosure</option>
      <option value="Refinance">Refinance</option>
      <option value="Equity">Equity</option>
      </select><span class="input-group-addon"><i class="fa fa-asterisk" aria-hidden="true"></i></span>       </div>
    <div class="help-block with-errors"><ul class="list-unstyled"><li>You must choose an item from the list</li></ul>
    </div>
  </div>
</div>
<div class="col-sm-4 col-xs-10 form-group">
  <div class="input-group">
    <span class="input-group-addon"><i class="fa fa-usd" aria-hidden="true"></i></span>
    <input name="SellingPrice" disabled="" class="form-control currency" id="SellingPrice" required="" type="text" placeholder="" data-bind="value:SellingPrice" data-validate="false">
    <span class="input-group-addon"><i aria-hidden="true"></i></span>
  </div>
  <div class="help-block with-errors">&nbsp;</div>
</div>

我是这个项目的新手，也是jquery的新手。我可能正在做一些愚蠢的事情。只是不知道是什么。看起来jquery 2.2.3和jquery.validaion 1.11.1 NuGet软件包已安装在项目中。
任何想法都将不胜感激。谢谢。

Answer 1

问题在于，仅存在'disabled'属性会导致输入被禁用。浏览器引擎不会查看“ disabled”的值。因此，当您希望启用该字段时，不要将禁用从true更改为false，而是完全删除该属性。

此外，如果您仅使用AngularJS，则可以轻松得多。您可以通过其他字段的值（甚至只是作用域值）来打开和关闭字段，而无需通过代码来完成。只需将属性添加到标签即可完成所有操作。在YouTube上查看NetNinja，以获取一些快速教程。

IE浏览器-选择框-JQuery v1.11.1-验证不正确

1 个答案: