使用jQuery与ARIA选择器禁用日历弹窗链接问题求助

你遇到的问题核心在于两点：一是插件的日历元素是动态生成的，直接绑定点击事件会失效；二是之前的全局禁用a标签逻辑错误，且CSS的pointer-events可能被插件的JS事件覆盖。

以下是可行的解决方案：

1. 结合CSS标记禁用状态 #

先通过CSS给目标日期添加禁用的视觉样式，同时增强交互提示：

/* 针对特定日期设置禁用样式 */
a.ui-state-default[data-date="23"] {
    background-color: #e6e6e6 !important;
    color: #cccccc !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

这里精准定位到日历的日期链接（带插件默认的ui-state-default类），避免影响其他页面元素。

2. 使用jQuery事件委托阻止选择 #

由于日历是弹窗动态生成的，必须用事件委托绑定到静态父元素（比如document或日历容器），才能捕获到动态元素的点击事件：

<script>
jQuery(document).ready(function($) {
    // 绑定到document，监听日历内特定日期的点击
    $(document).on('click', 'a.ui-state-default[data-date="23"]', function(event) {
        // 阻止默认跳转和事件冒泡，彻底阻断插件的选择逻辑
        event.preventDefault();
        event.stopPropagation();
        return false;
    });
});
</script>

优化建议 #

如果能找到插件日历的容器类（比如常见的.ui-datepicker），可以把document换成该容器，提升事件监听效率：

$(document).on('click', '.ui-datepicker a.ui-state-default[data-date="23"]', function(event) {
    event.preventDefault();
    event.stopPropagation();
    return false;
});

这样既从视觉上让用户知道该日期不可选，又从交互层面彻底阻止了选择行为，同时不会影响网站其他链接的正常功能。

内容的提问来源于stack exchange，提问作者Roger Rabbit