如何根据表格首列值禁用最后一列的锚点链接？

我来帮你搞定这个问题！你已经成功实现了input按钮的禁用逻辑，要把同样的规则用到<a>标签上，只需要注意一点：<a>标签本身没有原生的disabled属性，所以我们得通过阻止点击行为+添加禁用样式来模拟效果，和你处理input的逻辑保持一致就行。

具体实现步骤 #

1. 添加禁用链接的样式 #

先在你的<style>块里加上这段代码，让禁用的链接看起来和Bootstrap的禁用按钮风格统一：

a.disabled {
    pointer-events: none;
    opacity: 0.65;
    cursor: not-allowed;
}

2. 编写a标签的禁用逻辑 #

直接在你现有的脚本里添加这段代码，复用你已经定义好的disableValues数组：

// 处理a标签的禁用逻辑
$('tbody td:last-child a').each(function() {
    // 获取当前行首列的数值（去除文本前后空格）
    const firstColValue = +$(this).closest('tr').find('td:first-child').text().trim();
    // 如果首列值不是1或7，就禁用这个链接
    if (!disableValues.includes(firstColValue)) {
        // 阻止链接的跳转行为
        $(this).on('click', function(e) {
            e.preventDefault();
        });
        // 添加禁用样式，让用户直观感知不可点击
        $(this).addClass('disabled');
    }
});

3. 完整代码示例 #

整合所有内容后的完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 15px;
            text-align: left;
        }
        #t01 {
            width: 100%;
            background-color: #fff;
        }
        /* 禁用链接的样式 */
        a.disabled {
            pointer-events: none;
            opacity: 0.65;
            cursor: not-allowed;
        }
    </style>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>column1</th>
                <th>column2</th>
                <th>column3</th>
                <th>column4</th>
                <th>column5</th>
                <th>column6</th>
                <th>column7</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>5</td>
                <td> test-1 </td>
                <td> test-2 </td>
                <td> test-3 </td>
                <td> test-4 </td>
                <td> test-5 </td>
                <td> <a class="btn btn-primary btn-xs" href="/Doctor/">Doctor</a> </td>
            </tr>
            <tr>
                <td>7</td>
                <td> test-1 </td>
                <td> test-2 </td>
                <td> test-3 </td>
                <td> test-4 </td>
                <td> test-5 </td>
                <td> <a class="btn btn-primary btn-xs" href="/Park/">Park</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td> test-1 </td>
                <td> test-2 </td>
                <td> test-3 </td>
                <td> test-4 </td>
                <td> test-5 </td>
                <td> <a class="btn btn-primary btn-xs" href="/Office/">Office</a> </td>
            </tr>
            <tr>
                <td>1</td>
                <td> test-1 </td>
                <td> test-2 </td>
                <td> test-3 </td>
                <td> test-4 </td>
                <td> test-5 </td>
                <td> <a class="btn btn-primary btn-xs" href="/Home/">Home</a> </td>
            </tr>
            <tr>
                <td>6</td>
                <td> test-1 </td>
                <td> test-2 </td>
                <td> test-3 </td>
                <td> test-4 </td>
                <td> test-5 </td>
                <td> <input type="submit" class="btn btn-primary" name="btnSubmit" value="submit"> </td>
            </tr>
        </tbody>
    </table>
    <script>
        const disableValues = [1, 7];

        // 保留你原来的input按钮禁用逻辑
        $('tbody td:last-child input').prop('disabled', function() {
            let firstColValue = +$(this).closest('tr').find('td:first-child').text().trim();
            return !disableValues.includes(firstColValue);
        });

        // 新增的a标签禁用逻辑
        $('tbody td:last-child a').each(function() {
            const firstColValue = +$(this).closest('tr').find('td:first-child').text().trim();
            if (!disableValues.includes(firstColValue)) {
                $(this).on('click', function(e) {
                    e.preventDefault();
                });
                $(this).addClass('disabled');
            }
        });
    </script>
</body>
</html>

关键细节说明 #

• 样式一致性：.disabled类的样式和Bootstrap禁用按钮的视觉效果对齐，保证页面风格统一，用户体验更好。
• 逻辑复用：和你处理input的判断逻辑完全相同，保证规则统一，后续维护也更方便。
• 彻底阻止跳转：用e.preventDefault()直接阻止链接的默认跳转行为，就算用户通过键盘等其他方式触发，也不会跳转到目标页面。

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