javascript - 如何设置 Bootstrap 按钮以使其一键禁用

Question

Bootstrap 按钮用于将一些数据提交到 SQL Server DB。我希望当用户单击一次时禁用该按钮。但奇怪的是， 我必须“快速”单击该按钮两次才能将其禁用。但是onCommand c#函数无论怎么点击都运行良好。 所以这是代码

      <div style="margin-top:5px; margin-bottom:10px; text-align:center; "> 
          <asp:UpdatePanel ID="Ajax_SubmitReportRoom" runat="server" UpdateMode="Conditional">
          <ContentTemplate>
          <asp:LinkButton ID="SubmitReportRoom" type="button" CssClass="btn btn-info SubmitReport" OnClientClick="toggleVisibility();" runat="server" Text="Submit" OnCommand="SubmitReport_Command" CommandName="ReportRoom" CausesValidation="true" />
          </ContentTemplate>
          <Triggers>
          <asp:AsyncPostBackTrigger  ControlID="SubmitReportRoom" />
          </Triggers>
          </asp:UpdatePanel>
     </div>

     <script type="text/javascript">
     function toggleVisibility(){
         $('.SubmitReport').addClass('disabled');
         //$('.SubmitReport').attr("data-toggle", "modal"); // for some reason this is needed to disable the button but this causes OnCommand function to stop running
     }

Answer 1

试试这个

function toggleVisibility(){
    $('.SubmitReport').addClass('disabled').attr("data-toggle", "modal");
}