Kendo 可观察复选框未通过 jQuery .prop("checked") 更新
Posted
技术标签:
【中文标题】Kendo 可观察复选框未通过 jQuery .prop("checked") 更新【英文标题】:Kendo observable checkbox not updating through jQuery .prop("checked") 【发布时间】:2015-05-29 11:16:36 【问题描述】:我有一个绑定到多个复选框的 Kendo 可观察对象。当我通过单击它们来更新复选框时,可观察对象已正确更新。但是,如果我通过代码更新检查状态,则可观察对象不会更新。
下面是一个示例 sn-p,我有一个 Kendo UI Dojo。当您单击红色、绿色或蓝色复选框时,框中会显示正确的信息;但是,如果您使用“全选”选项,则不会更新可观察对象。
如何正确编写“全选”复选框的代码,以便可观察对象与选中状态一起更新?
$(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"));
);
);
<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%;" />
【问题讨论】:
【参考方案1】:你的错误是你使用了属性更改,jquery prop 方法不会触发 colordata 更改事件,jQuery API 解释:
对于选择框、复选框和单选按钮,当用户使用鼠标进行选择时会立即触发该事件,但对于其他元素类型,该事件会延迟到元素失去焦点
因此,您应该使用click()
方法,而不是使用prop()
。 fixed dojo 1
在使用prop()
之后,您可以使用trigger("change")
的另一种方法。 fixed dojo 2
【讨论】:
与click()
方法类似的方法可能有效,但您的dojo 无法正常工作。它只是切换子复选框,它应该全部选中或全部取消选中。如果你能修复道场,我会接受这个答案。
啊,我想念那部分......但我认为你可以自己解决这个问题。 :D 我已经修复了,请重新访问我的道场链接
是的,我可以自己修复它,我只是认为如果没有修复,答案是不完整的。以上是关于Kendo 可观察复选框未通过 jQuery .prop("checked") 更新的主要内容,如果未能解决你的问题,请参考以下文章
带有 JQuery 验证的 Kendo DatePickerFor
Jquery Fancyform 和 IE10:单击标签时未选中复选框