knockout.js是否忽略禁用，或者什么可以'允许'<a> click on disabled element?</a>

Question

我正在使用Jquery Mobile UI，knockout.js组合的页面。如果ViewModel不是有效的，则存在应该禁用JQuery移动分页的验证机制。我检查并且敲除机制工作正常，当模型从无效状态切换到有效状态时，它会删除手动添加的disabled ="disabled"属性。问题是我能够点击禁用的分页控件（调用knockout.js点击绑定javascript函数调用）。我甚至为所有儿童控件添加了disabled ="disabled"   knockout.js是否忽略了disabled ="disabled"，还是有不同的解释？

Jquery移动导航控件的HTLM，可以在

下禁用时点击

<a data-role="button" data-mini="true" data-icon="arrow-r" data-iconpos="notext" data-inline="true" data-transition="none" data-bind="click: function() { onTheMove.loadPagingData(bcAccountProductAudit, 'GoToNextSet', true); }, enable : PageObj.isValid()" href="#" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" title="" class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-mini ui-btn-icon-notext ui-btn-up-c" disabled="disabled">  
    <span class="ui-btn-inner ui-btn-corner-all" disabled="disabled">
        <span class="ui-btn-text" disabled="disabled"></span>
        <span class="ui-icon ui-icon-arrow-r ui-icon-shadow" disabled="disabled">&nbsp;</span> 
    </span>
</a>

IsValid为false且控制已禁用

点击内部的功能称为

发起呼叫的堆栈跟踪

Answer 1

Knockout没有检查自己的内容以查看某个元素是否被禁用 - click绑定只是监听浏览器对该元素的点击事件。

disabled不是全局属性，因此并非所有元素都支持它。如果您的<button>元素设置了disabled，并且您点击了该按钮，浏览器就不会生成Knockout可以收听的任何点击事件。 <a>标记不支持disabled属性，因此无论您是否设置该属性，浏览器都会生成点击事件。

解决此问题的最快方法是将<a>元素替换为支持disabled属性的元素（例如<button>），或者手动检查元素是否正确在您的点击处理程序中被禁用。请注意，虽然Knockout正确删除了disabled属性，但当enable条件对不支持它的元素评估为false时，它无法再次添加它 - 就像<a> - 所以您可能需要检查实际情况。