Knockout.js Formularwert basierend auf einem anderen Formularwert ändern

Question

Hallo Ich habe ein Formular, das eine Ja/Nein-Optionsfeldgruppe und eine andere Gruppe mit ungefähr 3 Optionsfeldwerten enthält.

Ich versuche eine Dynamik zu erreichen. Wenn der Wert der ersten Frage "Nein" ist, wird ein bestimmter Radiobutton in der zweiten Gruppe ausgewählt und der Benutzer kann den Wert nicht ändern. Wenn der Benutzer "Ja" auswählt, kann er die gewünschte Option aus der zweiten Gruppe auswählen.

Ich habe die disable unter der Bedingung, Funktionalität ordnungsgemäß funktioniert, aber ich bin kämpfen, um die Funktionalität zu erhalten, die ‚0‘ Radio-Button in der zweiten Gruppe zu wählen, wenn die Option ‚Nein‘ im ersten

Meines Code ausgewählt ist, ist:

this.isEligibleStateBenefitCd = ko.observable(args.isEligibleStateBenefitCd); 
this.weeklyPrsiContributionsRate = ko.computed(args.weeklyPrsiContributionsRate); 

HTML:

<div tabindex="0" class="radio-group" typeof="select_box"> 
<input data-bind="checked: isEligibleStateBenefitCd" value="Y" type="radio" name="isEligibleStateBenefitCd"/> Yes 
<input data-bind="checked: isEligibleStateBenefitCd" value="N" type="radio" name="isEligibleStateBenefitCd"/> No 
</div> 

<div tabindex="0" class="radio-group" typeof="select_box" data-bind="enable: isEligibleStateBenefitCd() === 'Y'"> 
<input data-bind="checked: weeklyPrsiContributionsRate" value="238.30" type="radio" name="weeklyPrsiContributionsRate" id="48"> 48 or Over 
<input data-bind="checked: weeklyPrsiContributionsRate" value="233.60" type="radio" name="weeklyPrsiContributionsRate" id="4047"> 40-47 
<input data-bind="checked: weeklyPrsiContributionsRate" value="0" type="radio" name="weeklyPrsiContributionsRate" id="0"> N/A - €0 
</div> 

Answer 1

Try abonnieren zu verwenden.

Die subscribe-Funktion drei Parameter akzeptiert: Rückruf ist die Funktion, die aufgerufen wird, wenn die Benachrichtigung geschieht, Ziel (optional) definiert den Wert dieses in der Callback-Funktion, und Ereignis (optional; Standard ist " Änderung ") ist der Name des Ereignisses zu erhalten Benachrichtigung für.

http://knockoutjs.com/documentation/observables.html

Es wird jedes Mal, wenn Ihr isEligibleStateBenefitCd Wechsel auslösen.

self.isEligibleStateBenefitCd.subscribe(function(newValue) { 
    if(newValue == 'N'){ 
     self.weeklyPrsiContributionsRate('0'); 
    } 
}); 

Für deaktivieren Sie es nicht auf div verwenden, versuchen Sie es:

<input data-bind="checked: weeklyPrsiContributionsRate,enable: isEligibleStateBenefitCd() === 'Y'" value="238.30" type="radio" name="weeklyPrsiContributionsRate" id="48"> 48 or Over 

<input data-bind="checked: weeklyPrsiContributionsRate,enable: isEligibleStateBenefitCd() === 'Y'" value="233.60" type="radio" name="weeklyPrsiContributionsRate" id="4047"> 40-47 

<input data-bind="checked: weeklyPrsiContributionsRate" value="0" type="radio" name="weeklyPrsiContributionsRate" id="0"> N/A - €0 

Arbeitsbeispiel:

$(function(){ 
 

 
    function ViewModal(opt_data) { 
 
    var data = opt_data || {}; 
 

 
    self.isEligibleStateBenefitCd = ko.observable(data.isEligibleStateBenefitCd || 'N'); 
 
    self.weeklyPrsiContributionsRate = ko.observable(); 
 
    
 
    self.isEligibleStateBenefitCd.subscribe(function(newValue) { 
 
     if(newValue == 'N'){ 
 
     \t self.weeklyPrsiContributionsRate('0'); 
 
      
 
     } 
 
    }); 
 
    
 
    } 
 

 
    var data = { 
 
    "isEligibleStateBenefitCd": 'Y' 
 
    }; 
 
    
 
    var vm = new ViewModal(data); 
 
    ko.applyBindings(vm); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<div tabindex="0" class="radio-group" typeof="select_box"> 
 
<input data-bind="checked: isEligibleStateBenefitCd" value="Y" type="radio" name="isEligibleStateBenefitCd"/> Yes 
 
<input data-bind="checked: isEligibleStateBenefitCd" value="N" type="radio" name="isEligibleStateBenefitCd"/> No 
 
</div> 
 

 
<div tabindex="0" class="radio-group" typeof="select_box"> 
 

 
<input data-bind="checked: weeklyPrsiContributionsRate,enable: isEligibleStateBenefitCd() === 'Y'" value="238.30" type="radio" name="weeklyPrsiContributionsRate" id="48"> 48 or Over 
 

 
<input data-bind="checked: weeklyPrsiContributionsRate,enable: isEligibleStateBenefitCd() === 'Y'" value="233.60" type="radio" name="weeklyPrsiContributionsRate" id="4047"> 40-47 
 

 
<input data-bind="checked: weeklyPrsiContributionsRate" value="0" type="radio" name="weeklyPrsiContributionsRate" id="0"> N/A - €0 
 

 
</div>