Question

Bootstrap http://wrapbootstrap.com/preview/WB0135486

我已将一个Observable值数组绑定到复选框但是这里的CheckBox已冻结为已禁用但我无法选中复选框。

<div class="box-content" data-bind="foreach: AvailableWorkingDayList">
  <div class="tab-content">
    <div class="tab-pane active" id="home">
      <ul class="box-list">
        <li>
          <i class="icon-calendar"></i><span> <label data-bind="text: WorkingDay,attr:{for:WorkingDayValue}" class="control-label col-lg-3"></label></span>
          <span class="pull-right"><input class="iButton-icons-tab" type="checkbox" data-bind="checked:WorkingDayValue,attr:{'id':WorkingDayId}"/></span>
        </li>
      </ul>
    </div>
  </div>
</div>

这是我填充对象的地方

$.each(tmpList, function (j, value) {
        utCmnBusinessCalendarViewModel.AvailableWorkingDayList.push(new NonWorkingDayObj(
            value.WorkingDayId,
            value.WorkingDay,
            '1'
            ));
    });

这是我的ObjectDefinition

var NonWorkingDayObj = function (workingDayId, workingDay, workingDayValue) {
        var self = this;
        self.WorkingDayId = ko.observable(workingDayId);
        self.WorkingDay = ko.observable(workingDay);
        self.WorkingDayValue = ko.observable(workingDayValue);
        return true;
    };

Answer 1

如果某些内容正在禁用复选框，则它不在您包含的代码中。这很好用。是否有可能你有一些元素（例如另一个div）覆盖复选框，以便不能点击它们？

function newEntry(id, name, value) {
  return {
    WorkingDayId: ko.observable(id),
    WorkingDay: ko.observable(name),
    WorkingDayValue: ko.observable(value)
  };
}
vm = {
  AvailableWorkingDayList: ko.observableArray([
    newEntry('DayId1', 'DayName1', '1'),
    newEntry('DayId2', 'DayName2', '2'),
    newEntry('DayId3', 'DayName3', '3')
  ])
};
vm.CheckedDays = ko.computed(function() {
  return ko.utils.arrayFilter(vm.AvailableWorkingDayList(), function(item) {
    return item.WorkingDayValue();
  });
});
ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="box-content" data-bind="foreach: AvailableWorkingDayList">
  <div class="tab-content">
    <div class="tab-pane active" id="home">
      <ul class="box-list">
        <li>
          <i class="icon-calendar"></i><span> <label data-bind="text: WorkingDay,attr:{for:WorkingDayValue}" class="control-label col-lg-3"></label></span>
          <span class="pull-right"><input class="iButton-icons-tab" type="checkbox" data-bind="checked:WorkingDayValue,attr:{'id':WorkingDayId}"/></span>
        </li>
      </ul>
    </div>
  </div>
</div>
<h2>Checked</h2>
<ul data-bind="foreach: CheckedDays">
  <li data-bind="text: WorkingDay"></li>
</ul>

Bootstrap复选框绑定与Knockout Freezed

1 个答案: