knockout.js 如何使用knockout禁用/启用html表格中的所有元素

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

我有一个表,每行有2个输入,所有输入都绑定到self.editing = ko.computed(…),即,对于表中的每个元素,我都必须绑定到<input type="number" data-bind="textInput:myObservObj, enable: editing" />
我如何避免这种情况,并让其他东西可以接受一个可观察的对象,在这种情况下,编辑和启用/禁用表中的所有输入?
下面是我完整html代码(正如您所看到的,我必须在所有地方重复enable: $parent.editing):

<table>
  <thead>
    <tr>
      <td style="width:115px"></td>
      <td style="margin-right: 10px">Left</td>
      <td>Right</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><label>Type (Jerger)</label></td>
      <td>
        <span data-bind="with:leftEarTympanometry">
                    <select data-bind="options: availableTypes,
                       value: type,
                       optionsCaption: 'Choose...', enable: $parent.editing, style: { borderColor: 'black' }"></select>
                </span>
      </td>
      <td>
        <span data-bind="with:rightEarTympanometry">
                    <select data-bind="options: availableTypes,
                       value: type,
                       optionsCaption: 'Choose...', enable: $parent.editing, style: { borderColor: 'black' }"></select>
                </span>
      </td>
    </tr>
    <tr>
      <td><label>Pressure (daPa)</label></td>
      <td>
        <span data-bind="with:leftEarTympanometry">
                    <input type="number" data-bind="textInput:pressure, enable: $parent.editing, style: { borderColor: pressureInvalid() ? 'red' : 'black' }"/>
                </span>
      </td>
      <td>
        <span data-bind="with:rightEarTympanometry">
                    <input type="number" data-bind="textInput:pressure, enable: $parent.editing, style: { borderColor: pressureInvalid()? 'red' : 'black' }"/>
                </span>
      </td>
    </tr>
    <tr>
      <td><label>Peak (mmho)</label></td>
      <td>
        <span data-bind="with:leftEarTympanometry">
                    <input type="number" data-bind="textInput:peak, enable: $parent.editing, style: { borderColor: peakInvalid()? 'red' : 'black' }"/>
                </span>
      </td>
      <td>
        <span data-bind="with:rightEarTympanometry">
                    <input type="number" data-bind="textInput:peak, enable: $parent.editing, style: { borderColor: peakInvalid()? 'red' : 'black' }" />
                </span>
      </td>
    </tr>
    <tr>
      <td><label>Volume (cc)</label></td>
      <td>
        <span data-bind="with:leftEarTympanometry">
                    <input type="number" data-bind="textInput:volume, enable: $parent.editing, style: { borderColor: volumeInvalid()? 'red' : 'black' }"/>
                </span>
      </td>
      <td>
        <span data-bind="with:rightEarTympanometry">
                    <input type="number" data-bind="textInput:volume, enable: $parent.editing, style: { borderColor: volumeInvalid()? 'red' : 'black' }"/>
                </span>
      </td>
    </tr>
  </tbody>
</table>
of1yzvn4

of1yzvn41#

您可以创建自定义绑定,如下所示:

ko.bindingHandlers.enableAll = {
        update: function(elem, valueAccessor) {
            var enabled = ko.utils.unwrapObservable(valueAccessor());

            ko.utils.arrayForEach(elem.getElementsByTagName('input'), function(i) {
                i.disabled = !enabled;
            });
            ko.utils.arrayForEach(elem.getElementsByTagName('select'), function(i) {
                i.disabled = !enabled;
            });
            ko.utils.arrayForEach(elem.getElementsByTagName('checkbox'), function(i) {
                i.disabled = !enabled;
            });
            ko.utils.arrayForEach(elem.getElementsByTagName('textarea'), function(i) {
                i.disabled = !enabled;
            });

        }
    };

然后在表单上,根据您要禁用还是启用所有控件,将enableAll绑定为true或false,如下所示:

<form data-bind="enableAll: somecondition()">
     ...
</form>

相关问题