2015-10-09 3 views
0

Bootstrap http://wrapbootstrap.com/preview/WB0135486Bootstrap Флажок Связывание с Нокаут замораживает

Я переплетен с Observable массива значений для Check Box Но здесь 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; 
    }; 
+0

вы связываете свой флажок, чтобы не-логическое значение. Я уверен, что workDayValue должен быть истинным/ложным, а не 1/что-то еще – dfperry

+0

Я тоже пытался, но не работал –

+0

Это проблема возникает при использовании forEach Binding. Единый флажок работает –

ответ

0

Если что-то отключить галочки, это не в коде, который включен. Это прекрасно работает. Возможно ли, что у вас есть элемент (например, другой 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>

Смежные вопросы