LinkButton，如何防止用"asp:LinkButton“双击？或在第一次单击后禁用"asp:LinkButton“

Question

我尽量避免双击，也就是说，第一次点击可以通过javascript函数禁用asp: LinkButton，所有这些都是在一个aspx页面中实现的。

我在前端方面的经验很少，如果你能支持我，我将非常感谢。

我试着简单地使用：setAttribute, getElementById, attr

<div class="modal-footer">
  <div class="btn-group" role="group">
    <asp:LinkButton ID="btnBringDataFlow" runat="server" CssClass="btn btn-danger" ToolTip="Cancel"
                    OnClick="btnBringDataFlow_Click" OnClientClick="preventDoubleClick()">Bring Data
    </asp:LinkButton>
    <asp:LinkButton ID="btnCancel" runat="server" CssClass="btn btn-primary" ToolTip="Cancel">Cancel</asp:LinkButton>
  </div>
</div>


<script type="text/javascript">
  function disabledLinkBringDataFlow() {

    document.getElementById('btnBringDataFlow').setAttribute("disabled", "");

    //document.getElementById("btnBringDataFlow").disabled = true;
  }
</script>  

我希望在第一次单击后禁用asp: LinkButton，以避免函数重复执行。

Answer 1

我认为，为了让Javascript方法通过ID获取元素，您需要在LinkButton控件中添加ClientIDMode = "Static"属性。默认情况下，服务器控件会向控件的ID值添加一些文本。

<asp:LinkButton ClientIDMode="Static" ID="btnBringDataFlow" runat="server" CssClass="btn btn-danger" ToolTip="Cancel" OnClick="btnBringDataFlow_Click" OnClientClick="preventDoubleClick()">Bring Data</asp:LinkButton>

如果想了解有关ClientIDMode属性的更多信息，请参阅：ClientIDMode

Answer 2

asp:LinkButton呈现一个锚定标记。使用this关键字访问锚点及其属性：

<asp:GridView ID="GridView1" runat="server" OnRowCommand="GridView1_RowCommand" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="btnBringDataFlow" runat="server" CssClass="btn btn-danger" ToolTip="Cancel"
                    OnClientClick="preventDoubleClick(this)">Bring Data
                </asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<script>
    function preventDoubleClick(sender) {
        sender.setAttribute("disabled", "");
    }
</script>

如果您喜欢使用内联代码onClienClick="this.setAttribute('disabled', '');"

Answer 3

感谢所有人

我的解决方案如下：

​

  <script>
        function preventDoubleClick() {
             $("#" + '<%= btnBringDataFlow.ClientID %>').addClass("disabled");
                $("#" + '<%= btnBringDataFlow.ClientID %>').attr("disabled", "disabled");
        }
    </script> 

<asp:LinkButton ID="btnBringDataFlow" runat="server" CssClass="btn btn-danger" ToolTip="Cancel" OnClick="btnBringDataFlow_Click" OnClientClick="preventDoubleClick()" >Bring Data</asp:LinkButton>

​