CakePHP 3.x：如何禁用Postlink按钮并实现提交加载GIF提示？

一、禁用Postlink按钮避免重复点击 #

你的现有代码存在选择器和目标元素的问题：.ui-button-text是按钮内部的文本元素，且你禁用的是#image-b-loading而非被点击的按钮本身。正确的做法是直接针对Postlink生成的按钮元素操作：

1. 首先确保你的Postlink生成时带有可识别的类名，比如：

<?= $this->Form->postLink('执行操作', ['action' => 'process'], ['class' => 'post-action-btn']) ?>

2. 用以下JS代码实现点击后禁用按钮：

$(document).on('click', '.post-action-btn', function() {
    // 禁用button标签类型的按钮
    $(this).prop('disabled', true).addClass('disabled-style');
    // 如果是a标签形式的Postlink，禁用属性不生效，直接移除点击事件并添加样式阻止交互
    $(this).off('click').css('pointer-events', 'none');
});

这样用户点击后按钮立即无法再次触发，避免重复提交。

二、发送POST请求时显示加载GIF #

可以通过隐藏/显示加载元素实现，步骤如下：

1. 在页面中添加一个默认隐藏的加载层（位置、样式可根据需求调整）：

<div id="loading-container" style="display:none; position:fixed; inset:0; background:rgba(255,255,255,0.8); z-index:999;">
    <img src="/img/loading.gif" style="position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);" alt="加载中">
</div>

2. 结合按钮点击事件显示加载图：

• 如果是普通表单提交（页面会跳转）：

$(document).on('click', '.post-action-btn', function() {
    $('#loading-container').show();
    // 同时禁用按钮
    $(this).prop('disabled', true);
});

加载图会一直显示直到页面跳转完成。

• 如果是AJAX异步提交POST：

$(document).on('submit', '#your-form-id', function(e) {
    e.preventDefault();
    const form = $(this);
    $('#loading-container').show();
    
    $.ajax({
        url: form.attr('action'),
        type: 'POST',
        data: form.serialize(),
        success: function(res) {
            // 处理请求成功后的逻辑，比如提示用户操作结果
        },
        error: function() {
            // 处理请求失败的逻辑，比如显示错误提示
        },
        complete: function() {
            // 请求完成后隐藏加载图，恢复按钮状态
            $('#loading-container').hide();
            $('.post-action-btn').prop('disabled', false).css('pointer-events', 'auto');
        }
    });
});

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