自动选中此框或使用挖空将其禁用

时间:2017-06-06 08:04:58

标签: javascript knockout.js

所以我想尝试做以下两件事之一:

1)当检查所有三个方框(付款,领取和退回)时,我希望自动检查第四个方框(已完成)。

OR

2)我希望第四个框(已完成)被禁用,直到选中所有其他框为止。

我无法弄清楚任何一个使用淘汰赛的js。这是我的代码:

<div class="center">
    <h2> Grad Apparels </h2>
    <table>
        <thead>
            <tr> 
                <th></th>
                <th> ID Number </th>
                <th> Full Name </th>
                <th> Payments </th>
                <th> Picked Up </th>
                <th> Returned </th>
                <th> Completed </th>
                <th></th>
            </tr>
        </thead>
        <tbody data-bind="foreach: apparels">
            <tr>
                <td data-bind="text: ($index() + 1)"> </td>
                <th data-bind="text: id"></th>
                <th data-bind="text: name"></th>
                <th> <input type="checkbox"> </th>  
                <th> <input type="checkbox"> </th> 
                <th> <input type="checkbox"> </th>
                <th> <input type="checkbox"> </th>
                <td> <a href="#" data-bind="click: $parent.remove">Remove</a></td>
            </tr>
        </tbody>
    </table>
    <br>
    <p> ID: <input data-bind="value: id"> </p>

    <p> Full Name: <input data-bind="value: name"></p>
    <button data-bind="click: add">ADD</button>
</div>

JavaScript的:

function apparel(id, name){
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
};

function viewModel(){ 
    var self = this;
    self.id = ko.observable('');
    self.name = ko.observable('');
    self.apparels = ko.observableArray([
        new apparel(915486876, 'Shajia'),
        new apparel(915123456, 'John Doe'),
        new apparel(948037466, 'Katherine'),
        new apparel(958480376, 'Samuel'),
        new apparel(984803976, 'Jane Doe')
    ]);

this.add = function(){
    self.apparels.push(new apparel(self.id(), self.name()))
}

this.remove = function(){
    self.apparels.remove(this)
}

}

ko.applyBindings(new viewModel());

1 个答案:

答案 0 :(得分:0)

您可以向ng new PROJECT_NAME cd PROJECT_NAME ng serve 对象添加三个可观察对象(paymentspickedUpreturned)以及一个计算(allChecked):

apparel

然后在你的表中使用它们:

    function apparel(id, name){
        var self = this;

        self.id = ko.observable(id);
        self.name = ko.observable(name);

        self.payments = ko.observable();
        self.pickedUp = ko.observable();
        self.returned = ko.observable();

        self.allChecked = ko.computed(function() {      
            return self.ch1() && self.ch2() && self.ch3();
        });
    };