如何在单击事件上向按钮的现有类添加另一个类名

Question

我有一个表单，单击按钮即可发送电子邮件。但是，在发送电子邮件时，该按钮保持活动状态，允许用户多次单击它，这会中断电子邮件发送过程。我想在单击按钮后立即向按钮添加“禁用”类。我尝试使用以下代码来实现此目的，但它不起作用。

请帮助我解决这个问题。我尝试了以下代码

<div class="d-grid mt-3">
<button class="btn btn-primary" type="submit" name="authoriseUser" id="authoriseUser" onclick="disableBTN()">Enroll New Admin <i class="fas fa-sign-in-alt ms-1"></i></button>
</div>

// JS & Jquery Code that I Tried are in the following order

// First Attempt - didn't work
<script type="text/javascript">
    $(document).ready(function(){
        $("#authoriseUser").on('click',function(){
            $(this).removeClass('btn btn-primary')
            $(this).addClass('btn btn-primary disabled')
        });
    });
</script>

//Second Attenpt - didn't Work
<script type="text/javascript">
    $(document).ready(function(){
        $("#authoriseUser").on('click',function(){
            $(this).removeClass('btn btn-primary').addClass('btn btn-primary disabled');
        });
    });
</script>

//Third Attempt - Didn't Work
<script type="text/javascript">
    $(document).ready(function(){
        $("#authoriseUser").on('click', function(){
            $(this).addClass('disabled').attr('disabled', true); 
        });
    });
</script>

Answer 1

<div class="d-grid mt-3">
    <button class="btn btn-primary" type="submit" name="authoriseUser" id="authoriseUser" onclick="disableBTN()">Enroll New Admin <i class="fas fa-sign-in-alt ms-1"></i></button>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $("#authoriseUser").on('click', function(){
            $(this).addClass('disabled').attr('disabled', true); 
        });
    });
</script>

您可以简单地添加“disabled”类，而不是删除“btn btn-primary”类。 因此，当单击按钮时，将添加“disabled”类+禁用按钮，无需再次添加“btn-primary”。