ドロップダウンの値に基づいてテキストボックスを有効にします

私は顧客のリストを表示しています。列はCustomerName、DesignationおよびOtherBoxです。 CustomerNameはラベル、desingationsはドロップダウン、otherBoxはテキストボックスです。指定ドロップダウンで私は 'Professional'と 'others'としてテキストを表示しています。ユーザーが 'Others'を選択した場合、テキストボックスに値を入力するOtherBoxを有効にする必要があります。ユーザーがプルダウンで「専門家」として再選択した場合、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); 
})

出典

2017-12-10 jai ganesh

テキストボックスの読み取り専用ステータスは、ドロップダウンの値によって異なります。 ドロップダウンの値を追跡し、テキストボックスのステータスを変更する必要があります（もちろん、手動ではなくノックアウト観測で行う必要があります）。

あなたのコードでは、テキストボックスを無効にするためのブール値を渡していますが、あなたはどこでも変更します。それが問題です。

私はあなたのコードの一部を編集する必要があり、それがここに https://codepen.io/trgiangvp3/pen/eyOvQz

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) 
 
    } 
 
    }

<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>

を実行します。しかし、私はそれが何のコーディング規約を持っていないし、モデル構造があるとして、あなたのコードは本当に悪い実装されていると思います定かでない。非常に読みにくい。

更新：私は、より良い実装のために別のCodePenを作成しました。あなたは見てみるかもしれませんBetter implementation

出典

2017-12-11 09:02:04 trgiangvp3

何らかの理由でcodepen URLが機能していません –

申し訳ありません、私は誤植をしました。すでに修正されています。 – trgiangvp3

お返事ありがとうございます。しかし、私は使いたくありません：optionsText： 'DesignationName' ..最初のOption 'Professional'にデフォルトでなければなりません –

ドロップダウンの値に基づいてテキストボックスを有効にします

答えて

関連する問題