如何使用敲除 disable/enable html table 中的所有元素

Question

我有一个 table，每行有 2 个输入，全部绑定到 self.editing = ko.computed(…)，即，对于 table 中的每个元素，我必须 <input type="number" data-bind="textInput:myObservObj, enable: editing" />

我怎样才能避免这种情况并在这种情况下编辑和enable/disable table中的所有输入可以接受可观察对象的其他东西？

这是我的完整 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>

Answer 1

您可以创建自定义绑定，如下所示：

    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>

如何使用敲除 disable/enable html table 中的所有元素

how to disable/enable all elements in an html table using knockout

javascript

knockout.js