自定义按钮自定义置灰

Posted 2020-10-12

js代码如下：

大于0时为可点击状态；小于0时为不可点击状态。

if(totalCount>0){
    $("#btnExport").removeClass("btnExportDisabled");
    $("#btnExport").css(‘pointer-events‘,‘auto‘);
    $("#btnExport").css("cursor", "pointer");
}else{
    $("#btnExport").addClass("btnExportDisabled");
    $("#btnExport").css(‘pointer-events‘,‘none‘);
        $("#btnExport").css("cursor", "not-allowed");
}

css代码如下：

设置按钮为不可用状态时的颜色：

<style type="text/css">
      .btnExportDisabled{
        background-color: #A9A9A9;
        opacity: 0.3;
    }
  </style>

知识点：

pointer-events：auto、none（为两个比较常见的属性）

当pointer-events的值设置为none的时候，有如下特性：

1、阻止用户的点击动作产生任何效果

2、阻止缺省鼠标的显示

3、阻止CSS里的hover和active事件的触发

4、阻止javascript点击动作触发的事件