数据绑定禁用属性在 foreach 内的按钮中不起作用

Question

我正在使用一个表格，其中有一个数据表和一个用于打开模式的按钮。我需要将此按钮设置为始终启用；我尝试使用下面的代码，但没有成功。

ko.applyBindings({
  editarTexto: function(data) {
    alert("msg")
  },
  items: [{}, {}, {}]
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<fieldset data-bind="disable: true">
  <table class="table">
    <thead>
      <tr>
        <th class="col-lg-1 ">Texto</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <button type="button" class="form-control" data-bind="click: function() { $root.editarTexto($data) }, disable: false">
            <span class="glyphicon glyphicon-pencil" aria-hidden="true" data-bind="disable: false">&times;</span>
          </button>
        </td>
      </tr>
    </tbody>
  </table>
</fieldset>

谁能帮帮我？

Answer 1

您掩盖了标题中的实际问题，并在代码中四处游荡。然而，代码本身表明您的问题可以解释为：

如何在具有disabled 属性的字段集中仅启用某些buttons？

因此复制可以小得多：

<fieldset disabled>
   <input> <!-- should be disabled -->
   <button>x</button> <!-- should be ENabled, but isn't -->
</fieldset>

答案是：你不能。唯一的解决方案是不禁用fieldset 并设置除按钮之外的所有后代元素disabled。

---

作为参考，您可以从the enable/disable binding source file 中看到，除了在相关元素上设置disabled 属性之外，它没有做任何事情。

---

参考见MDN条目fieldset disabled attribute：

如果设置了此布尔属性，则作为其后代的表单控件（其第一个可选元素的后代除外）将被禁用，即不可编辑。他们不会收到任何浏览事件，例如鼠标点击或与焦点相关的事件。浏览器通常会将此类控件显示为灰色。

---

有关参考，另请参阅the AngularJS version of your question。

Answer 2

根据spec，你可以把你的按钮放在<legend>里面。

<fieldset disabled>
  <legend>
    Legend
    <!-- This is ENABLED -->
    <button onclick="console.log('click')">Enabled</button>
  </legend>
  <input> <!-- this is disabled -->
  <button>disabled</button> <!-- this is disabled -->
</fieldset>