使用 knockout.js 禁用单选按钮

发布于 2024-12-02 09:28:20 字数 1463 浏览 0 评论 0原文

如何使用 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

染墨丶若流云 2024-12-09 09:28:20

当您使用全局变量而不是绑定数据时,看起来您需要显式评估函数:http://jsfiddle。 net/nFgnj/

<input type="radio" value="${index}" name="Answer" 
    data-bind="disable:app.viewModel.avatars.speaking(),
               checked:app.viewModel.interactive.answerSelected()" />

我不太喜欢这个解决方案,因为它依赖于 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/

<input type="radio" value="${index}" name="Answer" 
    data-bind="disable:app.viewModel.avatars.speaking(),
               checked:app.viewModel.interactive.answerSelected()" />

I don't really like this solution, because it relies on app being a global variable.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文