Как заполнить текстовое поле на основе выбора переключателя в нокауте JS - PullRequest
Новая
       8

Как заполнить текстовое поле на основе выбора переключателя в нокауте JS

0 голосов
/ 21 октября 2019

Я новичок в нокауте JS. У меня есть группа радиокнопок с тремя вариантами и текстовым полем.

Если я выберу вариант 1 в радиокнопке, мне нужно показать «12» в текстовом поле. если я выберу вариант 2, мне нужно будет показать «23» в текстовом поле и показать новый флажок «Используется вариант 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>

1 Ответ

0 голосов
/ 21 октября 2019 

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" />
...