JQuery实现年份切换更新月份按钮链接问题求助

1. 按钮无法禁用的原因 #

你使用<a>标签实现按钮，但<a>标签没有原生的disabled属性，只有<button>、<input>这类表单元素才支持原生disabled属性，所以直接调用$('#months .btn').attr('disabled', 'disabled')不会生效。

在Bootstrap 5中，要禁用<a>标签的按钮，需要通过以下方式实现：

• 添加Bootstrap内置的disabled类，让按钮呈现禁用的视觉样式（灰化、鼠标指针变禁用状态）
• 设置aria-disabled="true"，满足无障碍访问需求
• 额外处理跳转：由于<a>标签即使加了禁用样式，仍然可以被点击跳转，所以需要将href设为#或者移除该属性，也可以通过off('click')阻止点击事件。

2. 修改月份按钮href的方法 #

使用jQuery的attr()方法可以直接修改<a>标签的href属性，语法如下：

// 单个按钮修改
$('#月份ID').attr('href', '目标下载地址');

// 示例：结合选中年份修改January按钮的下载链接
$('#January').attr('href', `downloads/${selectedYear}/January_report.pdf`);

完整修改后的代码示例 #

以下是整合了禁用/启用按钮、修改href的完整jQuery代码，包含模拟AJAX数据的场景（实际项目中替换为真实的后端接口调用）：

$(document).ready(function () {
    var currentYear = new Date().getFullYear();
    for (var year = currentYear; year >= 2016; year--) {
        $('#yearCmbo').append($('<option>', {
            value: year,
            text: year
        }));
    }

    $('#yearCmbo').on('change', function () {
        var selectedYear = $(this).val();
        
        // 重置所有月份按钮：禁用状态+清空链接
        $('#months .btn').each(function() {
            $(this)
                .addClass('disabled')
                .attr('aria-disabled', 'true')
                .attr('href', '#')
                .off('click');
        });

        // 模拟后端返回的可用月份及对应下载链接（实际项目替换为AJAX请求）
        $.getJSON('your_php_api.php', { year: selectedYear }, function(availableData) {
            // availableData格式示例：{ "January": "download/2024/Jan.pdf", "March": "download/2024/Mar.pdf" }
            $.each(availableData, function(month, downloadUrl) {
                $(`#${month}`)
                    .removeClass('disabled')
                    .attr('aria-disabled', 'false')
                    .attr('href', downloadUrl);
            });
        });
    });

    // 初始化加载当前年份数据
    $('#yearCmbo').change();
});

关于真实AJAX调用的说明 #

如果后端PHP接口返回JSON格式的可用月份数据，直接使用$.getJSON()即可，接口需要接收year参数，并返回类似如下的JSON结构：

{
    "January": "download/2024/January.pdf",
    "May": "download/2024/May.pdf",
    "December": "download/2024/December.pdf"
}

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