javascript - 仅禁用设置按钮中的一个按钮

Question

我编写了表创建 PHP 代码，它使用名为 job_list 的 mysql 表中的数据创建一个表。表的每一行都有一个按钮，用户可以使用该按钮选择作业。

我的问题是我想禁用所有按钮中的一个按钮。我尝试使用一个类来禁用所有这些类。然后我遇到了另一个解决方案here这就是我想要的，但问题是，每次我第一次单击按钮时都必须单击两次才能使代码正常工作。初始点击代码开始按预期工作后。

这是我的 PHP + HTML 代码

<div class="limiter">
    <div class="container-table100">
        <div class="wrap-table100">
            <div class="table">

                <div class="row header">
                    <div class="cell topLeft">
                        Customer Name
                    </div>
                    <div class="cell">
                        Target
                    </div>
                    <div class="cell">
                        File Type
                    </div>
                    <div class="cell">
                        Job Comment
                    </div>
                    <div class="cell">
                        Cust. ID
                    </div>
                    <div class="cell topRight">
                        Select Job
                    </div>
                </div>

                <?php while ($getJobsRow = $getJobs -> fetch(PDO::FETCH_ASSOC)){ ?>
                    <?php $loopCount++; //Count the loop run through time ?>
                <div class="row">
                    <div class="cell left <?php if ($numOfRows == $loopCount){ ?>bottomLeft<?php } //Set the CSS class if the loop is at the last row ?> " data-title="Full Name">
                        <?php echo $getJobsRow['customer_name']; ?>
                    </div>
                    <div class="cell" data-title="Age">
                        <?php echo $getJobsRow['Mal_Name']; ?>
                    </div>
                    <div class="cell" data-title="Job Title">
                        <?php echo $getJobsRow['FileExt']; ?>
                    </div>
                    <div class="cell" data-title="Location">
                        <?php echo $getJobsRow['Job_Comment']; ?>
                    </div>
                    <div class="cell" data-title="Location">
                        <?php echo $getJobsRow['customer_id']; ?>
                    </div>
                    <div class="cell right <?php if ($numOfRows == $loopCount){ ?>bottomRight<?php } ?> " data-title="Location">
                        <button id="selBtnId_<?php echo $getJobsRow['jId']; ?>" class="selJobBtn w3-btn w3-blue-dark w3-round-medium w3-ripple" data-jid="<?php echo $getJobsRow['jId']; ?>">Select</button>
                    </div>
                </div>
                <?php } ?>

            </div>
        </div>
    </div>
</div>

我的 JQuery，

$(document).ready(function () {
    $('.selJobBtn').on('click', function () {
        $.ajax({
            url: '../Functions/OpenjobLister_Function.php',
            type: 'get',
            data: {
                'jid':$(this).data('jid'),
                'uid':$('#uId').val()
            },
            dataType:'text',
            complete:function(data){
                if(data.responseText !== "1"){
                    alert("Data not added");
                }else{
                    disableSelBtn();
                }
            }
        });            
    });
});

function disableSelBtn() {
    const $selBtns = $("button[id*='selBtnId_']");

    $selBtns.on('click', function () {
        $(this).prop('disabled', true);
    })
}

我使用AJAX来发送和接收数据。我只想在数据提交成功时禁用该按钮。那么有人可以告诉我如何在第一次使用时只需单击一下即可完成而不必单击两次吗？如果有更好的方法，请告诉我。

Answer 1

$(document).ready(function () {
$('.selJobBtn').on('click', function () {
    var thisButton = this;
    $.ajax({
        url: '../Functions/OpenjobLister_Function.php',
        type: 'get',
        data: {
            'jid':$(this).data('jid'),
            'uid':$('#uId').val()
        },
        dataType:'text',
        complete:function(data){
            if(data.responseText !== "1"){
                alert("Data not added");
            }else{
                $(thisButton).prop('disabled', true);
                //disableSelBtn();
            }
        }
    });            
});
});