JQuery在Asp.net中禁用动态创建的Html按钮

时间:2018-05-14 13:01:09

标签: javascript jquery html asp.net-mvc-4

我的视图中的按钮需要根据状态创建。

Index.cshtml:

<html>
<head>
    <script src="~/scripts/jquery-3.3.1.js"></script>
    <script src="~/scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        $("#send_request_button").on('click', function () {
            $.ajax({
                url: "SendRequest",
                method: "GET",
            }).done(function (request_result) {
                if (request_result != null && request_result == '1') {
                    alert("Attempting button disabling");
                    @*attempt 1*@
                    @*$(this).prop("disabled", true);*@
                    @*attempt 2*@
                    $(this).attr("disabled", "disabled");
                }else {
                    alert("Could not disable Button");
                }
            });
        });    
    </script>
</head>

<body>
<div>
        @{
        if (ViewBag.ButtonFlag != null && ViewBag.ButtonFlag)
        {
            Response.Write("<text id=\"send_request_text\"></text>");
            Response.Write("<input id=\"send_request_button\" type=\"button\" value=\"Send Insert Request\"/>");
        }
      }
    }
</body>
</html>

这正确地给出了按钮并且单击它,接收到成功的jquery ajax(在这种情况下为1)之后的预期结果。但是,禁用动态按钮的两次尝试都没有产生预期的结果。

1 个答案:

答案 0 :(得分:1)

尝试使用此而不是$(this)使用元素id在done()中选择这是因为如果在其他函数中使用,则使用'this'关键字的范围将不可用:

 $("#send_request_button").on('click', function () {
        $.ajax({
            url: "SendRequest",
            method: "GET",
        }).done(function (request_result) {
            if (request_result != null && request_result == '1') {
                alert("Attempting button disabling");
                @*attempt 1*@
                @*$(this).prop("disabled", true);*@
                @*attempt 2*@
                $("#send_request_button").attr("disabled", "disabled");
            }else {
                alert("Could not disable Button");
            }
        });
    });