knockout.js 如何在knockout js中基于单选按钮选择填充文本框

kwvwclae  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(155)

我是knockout js的新手。我有一个单选按钮组,其中有三个选项和一个文本框。
如果我在单选按钮中选择选项1,我需要在文本框中显示,“12”。如果我选择选项2,我需要在文本框中显示,“2/3”,并在UI中的文本框旁边显示一个新的复选框“已使用选项2”。如果我选择选项3,我需要在文本框中显示,“34”-(如果选择了选项2/3,需要隐藏复选框。
我尝试在文本框值中使用单选按钮的数据绑定。问题是单选按钮的值与我需要在文本框中显示的值不同。

<div class="row">
  <div class="col-xs-12">
    <div class="form-group"
      data-bind="validationElement: CompanyStatement, validationOptions: {insertMessages: false}">
      <div>
        <label class="control-label">4 - Company Statement</label>
        <div class="Company-statement">
          <div>
            <span class="kp-radiobutton">
              <input name="CompanyStatement" type="radio" value="1"
                data-bind="checkedValue:  CompanyStatement" />
            </span>
            <span class="radio-message">This is my first option</span>
          </div>
          <div>
            <span class="kp-radiobutton">
              <input name="CompanyStatement" type="radio" value="2"
                data-bind="checkedValue:  CompanyStatement" />
            </span>
            <span class="radio-message">This is second option</span>
          </div>
          <div>
            <span class="kp-radiobutton">
              <input name="CompanyStatement" type="radio" value="3"
                data-bind="checkedValue:  CompanyStatement" />
            </span>
            <span class="radio-message">This is my third option.</span>
          </div>
        </div>
        <span class="validationMessage" data-bind="validationMessage: CompanyStatement"></span>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-md-6 form-group" data-bind="validationElement: MySelectedCode">
    <label class="control-label">5 - Selected Code </label>
    <input type="text" class="form-control" placeholder="MySelectedCode"
      data-bind="value: CompanyStatement" />
  </div>
</div>

相关问题