敲除导致 JQuery select 出现问题？验证不工作

Question

所以我使用的是 Bootstrap、Jquery 2.2.3 和 Knockout 3.4.0。我遇到了一个非常奇怪的问题，无论我如何 select 使用 JQuery，复选框总是返回为 false 或 undefined。我认为这可能与 Knockout 数据绑定有关，但我不确定。

我在 ko.js 中使用自定义绑定来操作复选框并在选中复选框时产生其他问题。

然后 rblBracedBolted 的验证应该取决于复选框是否被选中，但所有值返回为 'false,' 或 'undefined,'，无论选中状态如何。

我知道当前的验证脚本没有意义，但我已经尝试了从 .prop 到 .attr 甚至 .is("checked") 等等的所有方法

<script type="text/javascript">

$(function () {
    ko.bindingHandlers.checkedProp = {
        init: function (element, valueAccessor) {
            Object.defineProperty(element, 'checked', {
                set: function (newValue) {
                    var value = valueAccessor();
                    value(newValue);
                }
            });
        },
        update: function (element, valueAccessor) {
            var value = ko.unwrap(valueAccessor());
            element.checked = value;
        }
    };
    ko.applyBindings(new viewModel());
});

$("#aspnetForm").validate({
    ignore: [],
    rules: { 
    <%=rblBracedBolted.UniqueID %>: {
        required: 
            {
                depends: function()
                {
                    var sel = $('[id$=cblAddlCoverage1]').val();

                    if (sel == 'Earthquake')
                    {
                        return true;
                    }
                    else
                    {
                        return false;
                    }
                }
            }
    },
  }
});
</script>

.btn-default {
  text-shadow: 0 1px 0 #fff;
  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  background-repeat: repeat-x;
  border-color: #dbdbdb;
  border-color: #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

<body>
<label class="btn btn-default">
<input type="checkbox" name="cblAddlCoverage1" id="cblAddlCoverage1" runat="server" value="Earthquake" data-toggle="button" data-bind="checkedProp: Earthquake" />
Earthquake
</label>

<div class="col-xs-12" data-bind="visible: Earthquake()==true">
    <div class="form-group">
        <label for="rblBracedBolted" class="control-label">Is the dwelling braced/bolted/tied down?</label>
        <div class="btn-group" data-toggle="buttons" style="padding-left: 10px">
            <label class="btn btn-default">
                <input type="radio" name="rblBracedBolted" id="rblBracedBolted" runat="server" value="Yes" />
                Yes
            </label>
            <label class="btn btn-default">
                <input type="radio" name="rblBracedBolted" runat="server" value="No" />
                No
            </label>
        </div>
    </div>
</div>

</body>

如果您需要更多信息，请随时提出任何问题。

Answer 1

此代码：

Object.defineProperty(element, 'checked', {
    set: function (newValue) {
        var value = valueAccessor();
        value(newValue);
    }
});

在复选框元素上定义了一个名为 checked 的属性。这会覆盖元素的原版 checked 属性。但是，您永远不会设置此属性值，实际上，即使您愿意，它也会 .
因此，尽管您可能认为 observable 的值是在复选框的每个 set 上设置的，但实际发生的是 set 从未被调用，因为 checked 属性无效。

我建议您放弃自定义绑定，并使用 Knockout 的内置 checked binding（在以下代码段中，为简洁起见，我删除了其他属性）：

<input type="checkbox" id="cblAddlCoverage1" data-bind="checked: Earthquake" />

这是一个使用你的 html 的演示（javascript 是我的）：

$(function () {
    var vm = function () {
      var self = this;
      self.Earthquake = ko.observable();
    }
    ko.applyBindings(new vm());
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<body>
  <label class="btn btn-default">
    <input type="checkbox" name="cblAddlCoverage1" id="cblAddlCoverage1" runat="server" value="Earthquake" data-toggle="button" data-bind="checked: Earthquake" />
    Earthquake
  </label>
  <div class="col-xs-12" data-bind="visible: Earthquake()==true">
      <div class="form-group">
          <label for="rblBracedBolted" class="control-label">Is the dwelling braced/bolted/tied down?</label>
          <div class="btn-group" data-toggle="buttons" style="padding-left: 10px">
              <label class="btn btn-default">
                  <input type="radio" name="rblBracedBolted" id="rblBracedBolted" runat="server" value="Yes" />
                  Yes
              </label>
              <label class="btn btn-default">
                  <input type="radio" name="rblBracedBolted" runat="server" value="No" />
                  No
              </label>
          </div>
      </div>
  </div>
</body>

敲除导致 JQuery select 出现问题？验证不工作

Knockout causing problems with JQuery select? Validation not working

asp.net

validation

jquery

knockout.js