Question

我有一个Kendo可观察对象，它被绑定到许多复选框。当我通过单击更新复选框时，可正确更新可观察对象。但是，如果我通过代码更新已检查状态，则不会更新可观察对象。

下面是一个示例代码段，我有一个Kendo UI Dojo。单击红色，绿色或蓝色复选框时，框中将显示正确的信息;但是，如果您使用＆＃34;全选＆＃34;选项，不会更新可观察对象。

如何正确编写＆＃34;全选＆＃34;的代码？复选框，以便可观察对象与已检查状态一起更新？

＆＃13;

$(document).ready(function () {
    var colordata = null;
    colordata = kendo.observable({
        colors: []
    });
    kendo.bind($("#chkbox-options"), colordata);
    
    colordata.bind("change", function(e) {
        var selectedColors = '';
        
        $.each(colordata.colors, function(key, value){
            selectedColors = selectedColors + " " + value;
        });
        if(colordata.colors.length == 0){
            $("#selected").val('no colors selected');
        }else{
            $("#selected").val('selected colors:' + selectedColors);  
        }
    });    
    
    $("#all").on("click", function() {
        $("#chkbox-options input[type='checkbox']").prop("checked", $(this).prop("checked"));
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
<input id="all" type="checkbox" />
<label for="all">Select All</label>
<div class="k-group" id="chkbox-options">
  <label for="chk1">Red</label>
  <input type="checkbox" id="chk1" value="Red" data-bind="checked: colors" />
  <label for="chk2">Green</label>
  <input type="checkbox" id="chk2" value="Green" data-bind="checked: colors" />
  <label for="chk3">Blue</label>
  <input type="checkbox" id="chk3" value="Blue"  data-bind="checked: colors" />  
</div> 
<input id="selected" style="width:100%;" />

＆＃13;

Answer 1

你的错误是你正在使用属性更改，jquery prop方法不会触发colordata更改事件，jQuery API解释：

对于选择框，复选框和单选按钮，当用户使用鼠标进行选择时会立即触发事件，但对于其他元素类型，事件将延迟直到元素失去焦点

因此，使用prop()代替click()。 fixed dojo 1

使用trigger("change")后可以使用prop()的另一种方法。 fixed dojo 2

Kendo observable复选框不通过jQuery .prop更新（＆＃34;已检查＆＃34;）

1 个答案: