在html中创建按钮

Question

我的布局有多个开始按钮：

但它们都是从一行代码生成的。

现在我要禁用我点击的按钮， 并非所有按钮 。

想象一下，它是一个for循环和呼叫按钮。

＆＃13;

＆＃13;

$(document).ready(function () {

    $(document).on('click','.startDocker' ,function(){
        //document.getElementById("startDocker").disabled = true;
        //Run Docker
        $.ajax({
            type: 'post',
            url: 'DockerIntegration',
            success: function () {
                alert("sucess");
                document.getElementsByClassName("startDocker").disabled = true;
            },
            error: function() {
                alert("error");
            }
        });
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以通过$(this)

访问点击的按钮

$(document).on('click','.startDocker' ,function(){
    $(this).prop('disabled', true);
    //Run Docker
    //...
});

Answer 2

document.getElementsByClassName返回对象数组，您必须禁用您单击的特定对象。尝试：

$(document).on('click','.startDocker' ,function(){
    //document.getElementById("startDocker").disabled = true;
    //Run Docker
    $.ajax({
        type: 'post',
        context: this,
        url: 'DockerIntegration',
        success: function () {
            alert("sucess");
            this[0].disabled = true;
        },
        error: function() {
            alert("error");
        }
    });
});

首先将this上下文设置为ajax函数，然后从jquery对象this[0]获取DOM对象，并将disabled设置为true。

Answer 3

您应该执行以下代码

$(document).ready(function () {

            $(document).on('click', '.startDocker', function () {
                var $this = $(this);
                $.ajax({
                    type: 'post',
                    url: 'DockerIntegration',
                    success: function () {
                        alert("sucess");
                        $this.attr("disabled", "disabled");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            });

        });

Answer 4

试试这个js：

$(document).on('click', '.startDocker', function(){
var _button = $(this);
        // document.getElementById("startDocker").disabled = true;
        // Run Docker
        $.ajax({
            type: 'post',
            url: 'DockerIntegration',
            success: function () {
                alert("success");
                _button.prop('disabled', true);
            },
            error: function() {
                alert("error");
            }
        });
    });

Answer 5

试试这个

＆＃13;

＆＃13;

$(document).ready(function () {

    $(document).on('click','.startDocker' ,function(){
        $(this).prop("disabled",true);
        //document.getElementById("startDocker").disabled = true;
        //Run Docker
        $.ajax({
            type: 'post',
            url: 'DockerIntegration',
            success: function () {
                alert("sucess");
                document.getElementsByClassName("startDocker").disabled = true;
            },
            error: function() {
                alert("error");
            }
        });
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>
<button class="btn btn-success btn-sm startDocker">Start</button>

＆＃13;

＆＃13;

＆＃13;

Answer 6

使用＆＃39; this＆＃39;保存按钮对象的对象，单击该对象将其禁用。

＆＃13;

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row text-center famImages">

    <div class="col-md-2">
        <img src="https://maxcdn.icons8.com/Share/icon/color/Gaming//pokecoin1600.png" class="img-responsive img-thumbnail">
    </div>

    <div class="col-md-2">
        <img src="https://maxcdn.icons8.com/Share/icon/color/Messaging//tongue_out1600.png" class="img-responsive img-thumbnail">
    </div>

    <div class="col-md-2">
        <img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" class="img-responsive img-thumbnail">
    </div>


</div>

＆＃13;

$(document).ready(function () {

    $(document).on('click','.startDocker' ,function(){
        var $this = this;
        //Run Docker
        $.ajax({
            type: 'post',
            url: 'DockerIntegration',
            success: function () {
                alert("sucess");
                $this.disabled = true;
            },
            error: function() {
                alert("error");
            }
        });
    });

});

＆＃13;

＆＃13;

＆＃13;