我是 knockout 的新手,有一个问题一直困扰着我。我在这上面花了一整天,但进展甚微。
我有 4 个单选按钮绑定(bind)到一个名为 InvType 的可观察对象:
<input type="radio" id="rdoAIP" name="rdoAIP" value="AIP" data-bind="checked: InvType" />AIP
<input type="radio" id="rdoPSI" name="rdoPSI" value="PSI" data-bind="checked: InvType" />PSI
<input type="radio" id="rdoPSIAIP" name="rdoPSIAIP" value="PSIAIP" data-bind="checked: InvType" />PSI/AIP
<input type="radio" id="rdoShortForm" name="rdoShortForm" value="PSIShortForm" data-bind="checked: InvType" />PSI Short Form
我有几个复选框,只有在选中特定单选按钮时才应选中这些复选框:
<input data-bind="checked: OptionalValue1" id="chk1" type="checkbox" /> Checkbox 1<br/>
<input data-bind="checked: OptionalValue2" id="chk2" type="checkbox" /> Checkbox 2<br/>
<input data-bind="checked: OptionalValue2" id="chk3" type="checkbox" /> Checkbox 3<br/>
当用户点击不同的单选按钮时,不同的复选框组合也应该被选中。例如,如果在初始页面加载时选中“AIP”单选按钮,则还应选中前 2 个复选框。但是,当用户单击“PSI”单选按钮时,我只想选中第一个复选框,而其他复选框则应取消选中。
编辑: 抱歉,我不清楚复选框。所以这是条件:
初始页面加载时,单选按钮被设置,这会导致复选框相应更新。每个不同的单选值都会导致不同的复选框组合被选中和取消选中。
页面加载后,用户可以单击单个复选框并更改其值。这不会影响任何其他复选框或单选按钮。
到目前为止我的 knockout 代码:
<script type="text/javascript">
var psiInvestigationViewModel = @Html.Raw(New JavaScriptSerializer().Serialize(Model));
function PSIInvestigationViewModel(data)
{
var self = this;
InvestigationType : ko.observable();
ko.mapping.fromJS(data, {}, self);
};
$(function ()
{
ko.applyBindings(new PSIInvestigationViewModel(psiInvestigationViewModel), $('#PSIInvestigation@(ViewData("UniqueID"))')[0]);
});
如果有人能告诉我根据单选按钮的变化更新复选框所需的代码,那么我将不胜感激。
谢谢
最佳答案
首先,所有单选按钮都应该相同,因此如果您选择一个,另一个将被取消选择。
如果复选框不是只读的,您可以在初始化函数中编写选择逻辑。 这个 init 函数将在每个单选按钮更改时被调用:
var VM = function () {
var self = this;
self.InvType = ko.observable();
var initState = function () {
var t = self.InvType();
self.OptionalValue1(t == 'AIP' || t == 'PSIAIP');
self.OptionalValue2(t == 'PSI' || t == 'PSIAIP');
self.OptionalValue3(t == 'PSIAIP');
};
self.OptionalValue1 = ko.observable();
self.OptionalValue2 = ko.observable();
self.OptionalValue3 = ko.observable();
self.InvType.subscribe(initState);
}
ko.applyBindings(new VM());
希望对你有帮助。
关于javascript - 使用 Knockout 更改单选按钮时设置复选框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19590607/