设置复选框,当单选按钮与挖空更改时
Set Checkbox when Radio button changes with Knockout
我是淘汰赛的新手,到目前为止,我有一个问题困扰着我。我花了一整天的时间,但进展甚微。
我有 4 个单选按钮绑定到一个名为 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"单选按钮时,我只想选中第一个复选框,而取消选中其他复选框。
编辑:抱歉,我不清楚复选框。所以这里是条件:
在初始页面加载时,单选按钮被设置,这会导致复选框相应地更新。每个不同的无线电值都会导致复选框的不同组合变为选中和取消选中状态。
页面加载后,用户可以单击单个复选框并更改其值。这不会影响任何其他复选框或单选按钮。
到目前为止,我的淘汰码:
<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 函数中对选择逻辑进行编码。这个 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());
见小提琴
我希望它有所帮助。
另一种方法是使用计算的可观察量:
self.Optionalvalue1 = ko.computed(function() {
return self.InvType() == 'AIP' || self.InvType() =='PSIAIP';
)};
等等。
相关文章:
- 复选框/单选按钮-添加所选项目的总价
- 将文本框/单选按钮/和下拉列表中的信息添加到dataTable
- 如何防止jQuery中复选框单击时执行多个代码
- 如果用户未选中复选框或选择按钮,如何为复选框或单选按钮设置一些默认值
- 如何在更改节点 JS 表中的复选框时禁用按钮
- 如何使用 rails3-jquery-autocomplete 更新复选框/单选按钮
- IE issue-使用复选框/单选按钮时,jQuery.change()不会触发回调
- 引导复选框/单选按钮不改变<输入>价值
- 在复选框单击中,更改可以单击的按钮
- 样式复选框&单选按钮
- 启用两个提交按钮上的复选框单击
- jQuery缓存刷新复选框单选按钮状态
- 基于复选框单选按钮调整总成本标价
- 自定义复选框/单选按钮,不用ID和FOR,也不用angular.js
- 单击复选框以禁用按钮
- 表单提交的复选框:点击按钮时显示错误
- 我如何有一个复选框/单选按钮张贴到一个文本区,当我点击提交按钮
- 如果我们在鼠标下移时设置preventDefault,然后双击文档,那么它就会阻止复选框/单选标签的默认行为
- Ipad复选框/单选按钮操作缓慢
- 如何在 JavaScript 中创建带有 3 个复选框/单选按钮作为选项的提示