Question

我目前有一个foreach循环填充一个带有JSON结果的表，并且在另一个问题上提供了一些帮助，我能够通过复选框使表正常工作但是当我选中一个复选框时，所有复选框都得到选择。我将如何区分它们，以便可以单独选择它们。

    <tbody data-bind="foreach: policies">
        <tr>
            <td><input type="checkbox" data-bind="checked: $parent.queued" /></td>
            <td data-bind="text: policy_number"></td>
            <td data-bind="text: policy_type"></td>
            <td data-bind="text: contact.first"></td>
            <td data-bind="text: contact.last"></td>
            <td data-bind="text: contact.street"></td>
            <td data-bind="text: contact.city"></td>
            <td data-bind="text: contact.state"></td>
            <td data-bind="text: contact.zipcode"></td>
            <td data-bind="text: contact.phonenumber"></td>
        </tr>
    </tbody>
</table>
<a data-bind="visible: queued" class="btn btn-lg btn-primary btn-block" data-bind="click: generate">Generate</a>
 <!--class="clickable" data-bind="click: generate"-->
<script type="text/javascript">
/* global ko, $ */
function Policy(data) {
    var self = this;
    Object.keys(data).forEach(function(prop) {
        self[prop] = data[prop];
    });

    self.generate = function() {
        window.open("{{ url_for('genreport') }}/" + qvm.letter() + '/' + self.id);
    }

}


function QueryViewModel(){
    var self = this;

    self.first = ko.observable('');
    self.last = ko.observable('');
    self.phone = ko.observable('');

    self.letter = ko.observable();

    self.letters = {{ letters|safe }};

    self.policies = ko.observableArray();
    self.queued = ko.observableArray(false);

    self.clear = function() {
        self.policies.removeAll();
        self.first('');
        self.last('');
        self.phone('');
    }

    self.search = function() {
        // postJson here
        var queryObj = {
            first: self.first(),
            last: self.last(),
            phone: self.phone()
        }

        $.postJSON("{{ url_for('report_search') }}", queryObj, function(result) {
            // first empty our policy table
            self.policies([]);

            // add results
            result.policies.forEach(function(p) {
                self.policies.push(new Policy(p));
            });
        });
    }    

}

var qvm = new QueryViewModel()

ko.applyBindings(qvm);
</script>

Answer 1

您可以尝试使用数组并使用选中的值

<td><input type="checkbox" data-bind="checked: $data.queuedValues, checkedValue: policyNumber" /></td>

function QueryViewModel(){

    var self = this;
....
self.queuedValues=ko.observableArray([]);
}

foreach循环只选择一个复选框

1 个答案: