javascript - 单击后如何禁用单击图标？

Question

单击带有 id(#prevleft 和 #nextright)的图标后，将调用 ajax 函数。在 ajax 函数加载新表期间，我想禁用 图标点击。

HTML代码:

hrHTML='<tr><th colspan="5"><i class="icon icon-chevron-left icon-2x lr" 
style="float:left;" title="Previous Five Weeks" 
id="prevleft"></i>' +"Weekly Utilization"+'<i class="icon icon-chevron-right 
icon-2x lr" style="float:right;" title="Next Five Weeks" id="nextright" 
></i></th>
</tr>';

如上所示，表格行是动态附加的。想要在单击后禁用 #prevleft 和 #nextright。

The following line doesn't work:

$('#prevleft').prop("disabled", true);

我是编码新手，所以感谢所有帮助。

Answer 1

检查一下你使用的jquery版本，希望你使用jquery 1.5或以下版本

对于 jQuery 1.6+

使用可以使用.prop()函数:

$('#prevleft').prop("disabled", true);
$("#nextright").prop("disabled", true);

对于 jQuery 1.5 及以下版本

您需要使用.attr() 并禁用图标

$("#prevleft").attr('disabled','disabled');
$("#nextright").attr('disabled','disabled');

并重新启用图标(完全删除属性):

$("#nextright").removeAttr('disabled');
$("#prevleft").removeAttr('disabled');

假设您在图标上有一个事件处理程序，在任何版本的 jQuery 中，您都可以使用以下属性来检查您的图标是否已启用

if (this.disabled){
   // your logic here
}