Question

以下代码在IE中运行良好。我们有一个下载链接，根据条件被禁用。相同的代码无法在Chrome中使用。

在Chrome中，链接未被禁用。是否有替代解决方案，以便在Chrome中运行？

我在开发者工具中观察过

在IE中：

<a disabled="" href="#" ...>

在Chrome中：

<a href="#"...>

data-bind="click: $root.studentsp，其中$root在Chrome中无效。

我们在代码中使用了嵌套循环，这是相关的代码块：

<div data-bind="foreach: studentDetails">
    <div class="row" id="Items">
        <table class="table table-striped branded-table" style="margin-top: 24px">
            <tbody data-bind="foreach: cp">
                <tr>
                    <td data-bind="text: Name"></td>
                    <td data-bind="text: rollno"></td>
                    <td data-bind="text: Format"></td>
                    <td> 
                         <a href="#" data-bind="click: $root.studentsp, enable: !$root.isavailable()">displayed</a>
                    </td>
                    <td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Answer 1

来自the docs for the enable binding，强调我的：

启用绑定仅在参数值为true时才启用关联的DOM元素。 这对于input，select和textarea等表单元素非常有用。

您也可以在the relevant source file中看到这一点。

There is no disabled attribute for anchor tags。替代品的最佳来源可能是this question。跳过那个，只用KnockoutJS做一个愚蠢但直截了当的方法就是：

<a href="#" data-bind="click: $root.studentsp, visible: !$root.isavailable()">displayed</a>
<span data-bind="visible: !!$root.isavailable()">displayed</span>

由于OP评论说这不会起作用，因为它会“使控件不可见”，这里是这个解决方案的概念证明：

ko.applyBindings({
  studentsp: function() { alert('clicked'); },
  isavailable: ko.observable(false)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<a href="#" data-bind="click: $root.studentsp, visible: !$root.isavailable()">displayed</a>
<span data-bind="visible: !!$root.isavailable()">displayed</span>
<hr />
<input type="checkbox" data-bind="checked: $root.isavailable" /> isavailable

使用嵌套for循环在Chrome中无法使用数据绑定点击

1 个答案: