選択タグを動的に有効/無効にする

Question

selectタグへの送信の値がknockoutjsを使用して「グローバル」以外の場合、部門選択タグを有効にしようとしています。しかし何らかの理由で部門選択タグが初期の有効/無効状態に固執しています。動的有効/無効は、他の要素に対して有効である。他の

<select data-bind="options: recipientSelector, optionsText: 'name',value: selectedRecipient">

無効にする必要があるselectタグの有効/無効状態を決定textareaの

選択/

<select data-bind="options: department_name"></select>

Javascrptを有効にViewModel

var SendMessageModel = function() { 
     var self = this; 
     this.to = ko.observableArray(); 
     this.to_all = ko.observable(); 
     this.title = ko.observable(); 
     this.message = ko.observable(); 
     this.recipientSelector = [ 
      { recipient: "global", name: "To All" }, 
      { recipient: "custom", name: "Custom" } 
     ]; 
     this.selectedRecipient = ko.observable(); 
     this.department_name = ['CSE', 'ECE', 'EE']; 
     self.disableSelects = ko.pureComputed(function() { 

      return self.selectedRecipient().recipient == "global"; 
     }); 
    }; 

    ko.applyBindings(new SendMessageModel()); 

Screenshot "Custom" option enables "Department" select element

Answer 1

あなたはそうのようなあなたのselectedRecipient観測可能との組み合わせで結合enableを使用することができます。

var SendMessageModel = function() { 
 
    var self = this; 
 
    this.to = ko.observableArray(); 
 
    this.to_all = ko.observable(); 
 
    this.title = ko.observable(); 
 
    this.message = ko.observable(); 
 
    this.recipientSelector = [ 
 
    { recipient: "global", name: "To All" }, 
 
    { recipient: "custom", name: "Custom" } 
 
    ]; 
 
    this.selectedRecipient = ko.observable(); 
 
    this.department_name = ['CSE', 'ECE', 'EE']; 
 
    self.disableSelects = ko.pureComputed(function() { 
 

 
    return self.selectedRecipient().recipient == "global"; 
 
    }); 
 
}; 
 

 
ko.applyBindings(new SendMessageModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<select data-bind=" 
 
    options: recipientSelector, 
 
    optionsText: 'name', 
 
    value: selectedRecipient"></select> 
 

 
<select data-bind=" 
 
    options: department_name, 
 
    enable: selectedRecipient().recipient === 'custom'"></select>

また、結合visibleを使用することができます。これはまだ2番目のselectがまだデフォルトの選択を示しているので、少し混乱するかもしれません。

Answer 2

あなたはそれがビューモデルですでにだ計算でenableを使用することができます。

<select data-bind="options: department_name, enable: disableSelects"></select> 

これはselectタグに無効な属性を追加しますdemo

を参照してください。視覚的にどのように見えるかは、UIスタイル/フレームワークに依存します。