JQuery 更新页面上的按钮链接

Question

页面的计划是页面顶部有一个年份组合框，下面有 12 个月按钮链接。更改年份将导致按钮的链接更新为指向要下载的文件，或者，如果该年/月不存在文件，则该按钮被禁用。由于种种原因不得不使用JQuery。我从未使用过 JQuery，所以我正在通过构建脚本逐渐自学。

页面的基本 HTML（也使用 Bootstrap 5.3）：

<!-- Dropdown current year back  -->
<select id="yearCmbo" class="font-italic mb-4">

</select>

<div class="d-grid gap-2 col-6 mx-auto" id="months">
    <a href="#" class="btn btn-outline-primary btn-lg " id="January">January</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="February">February</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="March">March</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="April">April</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="May">May</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="June">June</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="July">July</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="August">August</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="September">September</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="October">October</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="November">November</a>                                    
    <a href="#" class="btn btn-outline-primary btn-lg " id="December">December</a>                                    
</div>

JQuery（到目前为止...）

    $(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();
            alert(selectedYear);
            // 1 - disable all the month buttons
            $('#months .btn').attr('disabled', 'disabled');
            // 2 - Set all the month hrefs to '' or #
            // 3 - JSON/AJAX call to PHP file - send year and get back available months and hrefs
            // set hrefs and enable buttons where data is available
        });   // end combo change

        // Initially force call to combo change function to display data for current year
        $('#yearCmbo').change();

        }); // end ready

Year Combo（选择）的填充有效，并且yearCmbo onchange 的触发有效（警报显示）。然而，禁用按钮的代码不起作用 - 按钮保持活动状态。

如果有人能让我知道它为什么不起作用，以及如何根据脚本中的注释 2 更改 href，我将不胜感激。

Answer 1

我发现，而不是使用

<a href="#" class="btn btn-outline-primary btn-lg " id="December">December</a>

我用过

<button type="button" class="btn btn-outline-primary btn-lg "><a href="#" id="December" style="color:inherit; text-decoration: none">December</a></button> 

禁用链接的 JQuery 代码有效。

我认为这是因为禁用只能应用于嵌入到可以禁用的对象中的链接，如 Barmar 在评论中所示。