时间戳

首页 > 解决方案 > 如何根据淘汰赛js中的单选按钮选择填充文本框

knockout.js - 如何根据淘汰赛js中的单选按钮选择填充文本框

问题描述

我是淘汰赛js的新手。我有一个带有三个选项和一个文本框的单选按钮组。

如果我在单选按钮中选择选项 1，我需要在文本框中显示“12”。如果我选择选项 2，我需要在文本框中显示“23”并在 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>

标签： knockout.jsknockout-validation

解决方案

ko.applyBindings(() => {
  var self = this;
  self.kvp = [12, 23, 34];
  self.selected = ko.observable(null);
  self.selectedValue = ko.computed(function() {
    return self.kvp[self.selected() - 1];
  });
});
label {
  display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<!-- ko foreach: { data: kvp, as: 'key' } -->
<label><input type="radio" name="test" data-bind="checkedValue: $index()+1, checked: selected" /> <span data-bind="text: key"></span></label>
<!-- /ko -->
<input type="textbox" data-bind="value: selectedValue, enable: false" />
<input type="checkbox" data-bind="enable: false, visible: selected() == '2', checked: selected() == 2" />

推荐阅读