Question

我正在显示客户列表。列是CustomerName，Designation和OtherBox。 CustomerName是label，Desingations是下拉列表，otherBox是文本框。在“名称”下拉列表中，我正在显示“＆＃39; Professional＆＃39;和其他人＃39;如果用户选择＆＃39;其他＆＃39;然后我需要启用一个文本框输入值的OtherBox。如果用户在下拉列表中重新选择＆＃39; professional＆＃39;则应禁用OtherBox。基本上，OtherBox将根据下拉值启用禁用。下面是示例代码。请让我知道如何做到这一点..

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
      <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/dropdown.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="row">
                <table class="table-bordered table-condensed table-hover table-responsive" id="tblEncode">
                    <thead>
                        <tr>
                            <th>Customer Name</th>
                            <th>Designation</th>
                          <th>Others</th>
                        </tr>
                    </thead>
                    <tbody data-bind="foreach: customers">
                        <tr>
                            <td ><span data-bind="text: CustName"></span></td>
                            <td><select name="ddlUsers" data-bind="options: Designation,  optionsText: 'DesignationName', optionsValue: 'DesignationId'"></select></td>
                           <td> <input type="text"  data-bind="text: OtherBox, enable: BoxDisable" /></td>
                        </tr>
                    </tbody>
                </table>
            </div>   
    </form>
</body>
</html>

function UserViewModel() {
  var self = this;

  self.customers = ko.observableArray([]);
  self.Designations = ko.observableArray([]);

  function addCustomer(custId, custName, designation, otherBox, boxDisable) {
    return {
      CustId: ko.observable(custId),
      CustName: ko.observable(custName),
      Designation: ko.observable(designation),
      OtherBox: ko.observable(otherBox),
      BoxDisable: ko.observable(boxDisable)
    }
  }

  function addDesignation(designationId, designationName) {
    return {
      DesignationId: ko.observable(designationId),
      DesignationName: ko.observable(designationName)
    }
  }

  self.Designations().push(new addDesignation(1, 'Select  designation'));
  self.Designations().push(new addDesignation(1, 'Professional'));
  self.Designations().push(new addDesignation(2, 'Others'));

  var cust1 = new addCustomer(1, 'j', self.Designations(), null, false);
  self.customers.push(cust1)

  cust1 = new addCustomer(2, 'k', self.Designations(), null, false);
  self.customers.push(cust1)







}

$(document).ready(function () {
  var userModel = new UserViewModel();
  ko.applyBindings(userModel);
})

Answer 1

文本框的只读状态取决于下拉列表的值。 因此，您必须跟踪下拉值并更改文本框的状态（当然，您不应该手动操作，而是通过可观察的淘汰赛）。

在您的代码中，您传递的是一个布尔值，用于禁用文本框，但您无法更改它。这就是问题所在。

我已编辑了部分代码并将其设为https://codepen.io/trgiangvp3/pen/eyOvQz

＆＃13;

  function addCustomer(custId, custName, designation, otherBox, currentDesignationId) {
    return {
      CustId: ko.observable(custId),
      CustName: ko.observable(custName),
      Designation: ko.observable(designation),
      OtherBox: ko.observable(otherBox),
      CurrentDesignationId:  ko.observable(currentDesignationId)
    }
  }

＆＃13;

<td><select name="ddlUsers" data-bind="options: Designation, optionsText: 'DesignationName', optionsValue: 'DesignationId', value: CurrentDesignationId"></select></td>
<td><input type="text" data-bind="text: OtherBox, enable: CurrentDesignationId() == 2" /></td>

＆＃13;

但我认为你的代码实现得很糟糕，因为它没有编码约定，模型结构也不清楚。很难读。

更新：我已经创建了另一个CodePen以实现更好的实施。您可以查看Better implementation

根据下拉列值启用文本框

1 个答案: