Seçme etiketini dinamik olarak etkinleştirme/devre dışı bırakma

Question

Seçili etiketin gönderim değeri knockoutjs kullanılarak "global" dışında olduğunda departman select etiketini etkinleştirmeye çalışıyorum. Ancak bazı sebeplerden dolayı bölüm seçim etiketi başlangıç ​​etkinleştirme/devre dışı bırakma durumuna sıkışmış durumda. Dinamik olarak etkinleştirme/devre dışı bırakma diğer öğeler için çalışır örn. Diğer

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

özürlü olması gerekir seçme etiketi etkinleştirmek/devre dışı durumunu belirler textarea

Seç/

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

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

Sen enable senin selectedRecipient gözlemlenebilir şöyle birlikte bağlayıcı kullanabilirsiniz:

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>

Ayrıca bağlama visible kullanabilirsiniz. Yine de, ikinci select hala bir varsayılan seçim gösterdiğinden bu biraz kafa karıştırıcı olabilir.

Answer 2

O görünümü modelinde zaten bilgisayarlı ile enable kullanabilirsiniz:

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

bu seçkin etikete engelli bir özellik katar demo

bakınız. Görsel olarak nasıl göründüğünüz, kullanıcı arayüzü stilinize/çerçevenize bağlı olacaktır.