嗨,我有一个表单,其中包含一个是/否单选按钮组和另一个具有大约3个单选按钮值的组。
我正在尝试实现一个动态,其中如果第一个问题的值是“否”,它将在第二个组中选择一个特定的单选按钮,并禁止用户更改该值。如果用户选择“是”,那么他们可以从第二组中选择任何他们想要的选项。
我已使“禁用条件”功能正常工作,但如果在第一组中选择了“否”选项,我正努力使该功能在第二组中选择“0”单选按钮
我的代码是:

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>

最佳答案

尝试使用订阅。
subscribe函数接受三个参数:callback是
每当通知发生时调用的函数,target
(可选)在回调函数中定义此值,并且
event(可选;默认为“change”)是事件的名称
接收的通知。
http://knockoutjs.com/documentation/observables.html
它会在你每次换衣服的时候触发。

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

对于禁用,不要在div上使用它,请尝试:
<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

工作示例:
$(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'){
        	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>

10-05 20:56
查看更多