Question

我正在尝试根据子功能结果的结果手动选中或取消选中复选框。但它不起作用。下面是示例代码。我有客户表，我正在使用knockout foreach循环显示。在里面，我需要一个复选框，用于批准＆＃39;领域。选中“批准”字段后，我需要调用一个函数＆＃39; CheckApprove＆＃39;。在此功能中，我首先检查复选框是选中还是取消选中。如果选中它，我需要调用一个子函数，然后根据我需要手动选中复选框的函数结果。我正在尝试取消选中同样的事情。我无法手动检查或取消选中。请帮忙

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm5.aspx.cs" Inherits="WebApplication2.WebForm5" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <link rel="stylesheet" href="Content/bootstrap.css" /> 
    <script type="text/javascript" src="Scripts/jquery-3.1.1.js"></script>
    <script type="text/javascript" src="Scripts/knockout-3.4.2.js"></script>
  <script type="text/javascript" src="Scripts/synonym.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="container">
        <table>
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Approve</th>
            </tr>
          </thead>
          <tbody  data-bind="foreach:Customers">
            <tr>
              <td><span data-bind="text : CustomerId"></span> </td>
              <td><span data-bind="text : CustomerName"></span></td>
              <td><input type="checkbox" data-bind="checked: Approve, event: { click: $root.CheckApprove.bind(Approve) }" /></span></td>
            </tr>
          </tbody>
        </table>
    </div>
    </form>
</body>
</html>

    function customerViewModel() {
      self = this;
      self.Customers = ko.observableArray([]);


      function addCustomer(customerId, customerName, approve) {
        return {
          CustomerId: ko.observable(customerId),
          CustomerName: ko.observable(customerName),
          Approve: ko.observable(approve)
        }
      }


      self.Customers.push(new addCustomer(1, 'Cust1', false));
      self.Customers.push(new addCustomer(2, 'Cust2', false));
      self.Customers.push(new addCustomer(3, 'Cust3', false));


      self.CheckApprove = function (data) {
        var result = data.Approve();
        var id = data.CustomerId()

        if (result == true) {
          var customerCheck = Method1() // result of process1
          if (customerCheck == true) {
            for (var i = 0; i < self.Customers().length; i++) {
              var innerid = self.Customers()[i].CustomerId();
              if (id === innerid) {
                self.Customers()[i].Approve('true');
                return;
              }
            }
          }      
        }

        if (result == false) {
          var customerCheck = Method2() // result of process1
          if (customerCheck == false)
          for (var i = 0; i < self.Customers().length; i++) {
            var innerid = self.Customers()[i].CustomerId();
            if (id === innerid) {
              self.Customers()[i].Approve('false');
              return;
            }
          }
        }
      }

      function Method1() {
        return true;
      }

      function Method2() {
        return false;
      }
    }


    $(document).ready(function () {
      var cs = new customerViewModel();
      ko.applyBindings(cs);

    });

Answer 1

当您使用click绑定以及其他事件（例如checked）时，click函数应返回true以传播下一个事件。

下面是工作示例。（1不可检查，3不可检查，2不兼容）

＆＃13;

function customerViewModel() {
  self = this;
  self.Customers = ko.observableArray([]);

  function addCustomer(customerId, customerName, approve) {
    return {
      CustomerId: ko.observable(customerId),
      CustomerName: ko.observable(customerName),
      Approve: ko.observable(approve)
    }
  }

  self.Customers.push(new addCustomer(1, 'Cust1', false));
  self.Customers.push(new addCustomer(2, 'Cust2', false));
  self.Customers.push(new addCustomer(3, 'Cust3', true));

  self.CheckApprove = function(data) {
    
    var result = data.Approve();
    var id = data.CustomerId()
    var customerCheck = null;

    if (result == true) {      
      customerCheck = Method1(id) // result of process1
    }

    if (result == false) {
      customerCheck = Method2(id) // result of process1
    }
    
    data.Approve(customerCheck); // assuminng "customerCheck" be true/false
    return true; // needed to propagate the next event (which is checked)
  }

  function Method1(id) { // check eligibility
    return id == 2;
  }

  function Method2(id) { // uncheck eligibility
    return id == 3;
  }
}


$(document).ready(function() {
  var cs = new customerViewModel();
  ko.applyBindings(cs);
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="form1" runat="server" style="display: inline-block; margin: 100px 20px;">
  <div class="container">
    <table>
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Approve</th>
        </tr>
      </thead>
      <tbody data-bind="foreach:Customers">
        <tr>
          <td><span data-bind="text : CustomerId"></span></td>
          <td><span data-bind="text : CustomerName"></span></td>
          <td><input type="checkbox" data-bind="checked: Approve, click: $root.CheckApprove"></td>
        </tr>
      </tbody>
    </table>
  </div>
</form>
<pre style="display: inline-block;" data-bind="text: ko.toJSON($data, null, 2)"></pre>

＆＃13;

在淘汰赛中手动检查或取消选中

1 个答案: