如何使用ViewModel连接复选框的启用 [英] How to wire up enable on checkbox with ViewModel

问题描述

我正在学习kickout.js.经过大量的工作，我使这个小的viewmodel工作了，但是ViewModel的shouldBeEnabled方法似乎很笨拙.有没有更好的方法来绑定它?

我要实现的目标是，如果选择了第一项，则用户将无法选择第三项，反之亦然(如果用户选择了第三项，则用户将无法选择第一项.)

请参见小提琴

<input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType9, 9), checked:    reportType9    "  />Check 1
<br />

<input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType11, 11), checked: reportType11" />Check 2

<br />
    <input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType12, 12), checked: reportType12" />Check 3



function ViewModel() {
    var self = this;

    self.reportType9 = ko.observable(false);
    self.reportType11 = ko.observable(false);
    self.reportType12 = ko.observable(false);

    self.shouldBeEnabled = function (isChecked, id) {

            switch (id) {
                case 9:
                    if (isChecked()) {
                        self.reportType12();
                        return true;
                    }
                    else {
                        if (self.reportType12()) {
                            return false;
                        }
                    }
                    return true;
                    break;

                case 12:

                    if (isChecked()) {
                        self.reportType9();
                        return true;
                    }
                    else {
                        if (self.reportType9()) {
                            return false;
                        }

                    }
                    return true;
                default:
                    return true;
            }

    };

}



$(function () {
    ko.applyBindings(new ViewModel());
})

解决方案

您可以在视图中放入逻辑:

enable: reportType12() === false

实时演示(单击).

常规示例: 实时演示(单击).

<input 
  type="checkbox" 
  data-bind="enable: check2() === false, checked: check1"
>
<label>Check 1</label>

<input 
  type="checkbox" 
  data-bind=" enable: check1() === false, checked: check2"
>
<label>Check 2</label>

I am just learning knockout.js. After much work, I got this small viewmodel working, but the shouldBeEnabled method of the ViewModel seems pretty clunky. Is there a better way to bind this?

What I am trying to achieve is that if the first item is selected, the user cannot select the third item, and vice versa (the user can't select the first item, if he has selected the 3rd.)

See this fiddle

<input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType9, 9), checked:    reportType9    "  />Check 1
<br />

<input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType11, 11), checked: reportType11" />Check 2

<br />
    <input type="checkbox" data-bind=" enable: shouldBeEnabled(reportType12, 12), checked: reportType12" />Check 3



function ViewModel() {
    var self = this;

    self.reportType9 = ko.observable(false);
    self.reportType11 = ko.observable(false);
    self.reportType12 = ko.observable(false);

    self.shouldBeEnabled = function (isChecked, id) {

            switch (id) {
                case 9:
                    if (isChecked()) {
                        self.reportType12();
                        return true;
                    }
                    else {
                        if (self.reportType12()) {
                            return false;
                        }
                    }
                    return true;
                    break;

                case 12:

                    if (isChecked()) {
                        self.reportType9();
                        return true;
                    }
                    else {
                        if (self.reportType9()) {
                            return false;
                        }

                    }
                    return true;
                default:
                    return true;
            }

    };

}



$(function () {
    ko.applyBindings(new ViewModel());
})

解决方案

You can put the logic right into the view:

enable: reportType12() === false

Live demo (click).

Generic sample: Live demo (click).

<input 
  type="checkbox" 
  data-bind="enable: check2() === false, checked: check1"
>
<label>Check 1</label>

<input 
  type="checkbox" 
  data-bind=" enable: check1() === false, checked: check2"
>
<label>Check 2</label>

这篇关于如何使用ViewModel连接复选框的启用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！