使用 knockout.js 禁用单选按钮
如何使用 knockout.js 禁用单选按钮?我不希望用户能够选择它。我的下面的模板不起作用。
<div id="answers" data-bind="template: { name: 'answerTmpl', data: interactive.answers }">
</div>
<script id="answerTmpl" type="text/html">
{{each(index, value) $data}}
<div>
<input type="radio" value="${index}" name="Answer" data-bind="disable: app.viewModel.avatars.speaking, checked: app.viewModel.interactive.answerSelected"/> <span>${value}</span>
</div>
{{/each}}
</script>
app.avatars.js
(function (app, $, undefined) {
app.viewModel = app.viewModel || {};
app.viewModel.avatars = {
speaking: ko.observable(false),
loaded: ko.observable(false)
};
app.interactive.js
(function (app, $, undefined) {
app.viewModel = app.viewModel || {};
app.viewModel.interactive = {
timeout: 1500,
answers: ko.observableArray(),
answerSelected: ko.observable(''),
correctAnswer: ko.observable(-1),
bookPage: ko.observable(1),
chapterEmail: ko.observable(''),
trialogue: {
inProgress: ko.observable(false),
response: ko.observable(''),
conversation: ko.observableArray()
}
};
app.interactive.init = function () {
ko.applyBindings(app.viewModel);
};
How do I disable a radio button with knockout.js? I don't want the user to be able to select it. My template below isn't working.
<div id="answers" data-bind="template: { name: 'answerTmpl', data: interactive.answers }">
</div>
<script id="answerTmpl" type="text/html">
{{each(index, value) $data}}
<div>
<input type="radio" value="${index}" name="Answer" data-bind="disable: app.viewModel.avatars.speaking, checked: app.viewModel.interactive.answerSelected"/> <span>${value}</span>
</div>
{{/each}}
</script>
app.avatars.js
(function (app, $, undefined) {
app.viewModel = app.viewModel || {};
app.viewModel.avatars = {
speaking: ko.observable(false),
loaded: ko.observable(false)
};
app.interactive.js
(function (app, $, undefined) {
app.viewModel = app.viewModel || {};
app.viewModel.interactive = {
timeout: 1500,
answers: ko.observableArray(),
answerSelected: ko.observable(''),
correctAnswer: ko.observable(-1),
bookPage: ko.observable(1),
chapterEmail: ko.observable(''),
trialogue: {
inProgress: ko.observable(false),
response: ko.observable(''),
conversation: ko.observableArray()
}
};
app.interactive.init = function () {
ko.applyBindings(app.viewModel);
};
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
当您使用全局变量而不是绑定数据时,看起来您需要显式评估函数:http://jsfiddle。 net/nFgnj/
我不太喜欢这个解决方案,因为它依赖于
app
作为全局变量。When you are using global variables instead of bound data, it looks like you need to explicitly evaluate the functions: http://jsfiddle.net/nFgnj/
I don't really like this solution, because it relies on
app
being a global variable.