Нокаут, вызывающий проблемы с JQuery select? Проверка не работает - PullRequest
Новая
       9

Нокаут, вызывающий проблемы с JQuery select? Проверка не работает

0 голосов
/ 06 января 2020

, поэтому я использую Bootstrap, Jquery 2.2.3 и Knockout 3.4.0. У меня действительно странная проблема, когда флажок всегда будет возвращаться как ложный или неопределенный, независимо от того, как я выбрал его с помощью JQuery. Я думаю, что это может иметь какое-то отношение к привязке данных Knockout, но я не уверен.

Я использую пользовательскую привязку в ko. js, чтобы манипулировать флажками и иметь другую вопросы возникают, когда флажок установлен.

Тогда проверка rblBracedBolted должна зависеть от того, установлен флажок или нет, но все значения возвращаются как «false» или «undefined», независимо от установленного status.

Я знаю, что текущий скрипт для проверки не имеет смысла, но я перепробовал все от .prop до .attr и даже .is ("флажок") et c, et c . 

<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>

Не стесняйтесь задавать любые вопросы, если вам нужна дополнительная информация.

1 Ответ

1 голос
/ 07 января 2020

Этот код: 

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

определяет свойство с именем checked в элементе флажка. Это перезаписывает свойство vanilla checked элемента. Однако вы никогда не устанавливаете значение этого свойства, и на самом деле, даже если бы вы это сделали, оно вызвало бы бесконечное l oop.
Таким образом, хотя вы и могли подумать, что значение наблюдаемого равно установите для каждого set флажка, что на самом деле происходит так: set никогда не вызывается, потому что свойство checked признано недействительным.

Я предлагаю вам сбросить пользовательскую привязку и использовать встроенную команду Knockout. в checked привязке (в следующем фрагменте я удалил другие атрибуты для краткости): 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...