CODEWITHSUNDEEP
javascriptjquery.nettwitter-bootstrapbutton
SpiderWeb
SpiderWeb

Reputation: 79

How do you set up Bootstrap button so that it becomes disabled in one click

The bootstrap button is to submit some data into the SQL server DB. I want the button to be disabled when the user clicks it once. But weirdly, I have to click the button twice 'quickly' to make it disabled. But the onCommand c# function runs well no matter how you click it. so here is the code

      <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
     }

Upvotes: 1

Views: 78

Answers (4)

Rana Aalamgeer
Rana Aalamgeer

Reputation: 712

The simple code to disabled the button in this case call the toggleVisibility function on click event and process below code.

function toggleVisibility(){
    $('button').prop("disabled", true);
}

Upvotes: 0

Siva.G ツ
Siva.G ツ

Reputation: 839

Try this

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

Upvotes: 1

asalgan
asalgan

Reputation: 326

Try this:

$("#SubmitReportRoom").on("click", function(){
    if (e.handled !== true) {
      e.handled = true;
      $("#SubmitReportRoom").prop("disabled", true);
    }
});

Upvotes: 0

eXecute
eXecute

Reputation: 176

Instead of addClass, try .attr('disabled', 'disabled')

Upvotes: 0

Related Questions