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，以避免函数重复执行。

- Davideveloper

Answer 1

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', '');"

- Marcelo Vismari

Answer 2

我认为为了让你的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

- A-A-ron

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>

- Davideveloper