Button gets disabled when clicked second time

Question

I have the following button on my page

<asp:Button ID="btnSignoff" runat="server" Text="Sign Off & Send" CssClass="btn btn-primary" OnClientClick="openSignOffModal(); return false;"/>

first time clicked button works fine(shows a modal popup). After closing the popup when I press the button again, now it gets disabled.

Is that the default behaviour? Any idea why its acting like that? how can i fix it?

function openSignOffModal() {

           //check if atleast one RCTI is selected
           if (ValidateCheckBox())
               $('#SignOffRCTIModal').modal();
           else
               $('#NoRCTISelectedModal').modal();

       }

Markup

<div class="modal hide" id="SignOffRCTIModal" style="width: 500px">
    <div class="modal-header">
        <h3>Sign Off RCTI</h3>
    </div>
    <div class="modal-body form-horizontal">            
        <asp:Panel ID="pnlSignOffRCTI" runat="server">
            <p>
                Are you sure you want to Signoff the selected RCTI(s)? 
            </p>
        </asp:Panel>
    </div>
    <div class="modal-footer">
        <asp:Button ID="btnConfirmSignOff" runat="server" CssClass="btn" Text="Sign Off and Send" CausesValidation="false" />
        <button class="btn btn-primary" data-dismiss="modal" data-focus="true" id="btnCancel">Cancel</button>
    </div>
</div>
<div class="modal hide" id="NoRCTISelectedModal" style="width: 500px">
    <div class="modal-header">
        <h3>No RCTI Selected</h3>
    </div>
    <div class="modal-body form-horizontal">            
        <asp:Panel ID="Panel2" runat="server">
            <p>
                Please select an RCTI first in order to proceed.
            </p>
        </asp:Panel>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" data-dismiss="modal" data-focus="true">OK</button>
    </div>
</div>

P.S. I have ajax controls on my page but on click of this button nothing would be updated so i havent ajaxified it.

We can't possibly answer the question without looking at relevant server-side/client-side code. Please [edit] the question and include a [mcve] to demonstrate the problem. — Nisarg Shah, May 02 '18 at 06:51

Samra · Answer 1 · 2018-05-02T07:10:29.617

Yayy! It works! So in .master i have defined a property like this

$("input[type='submit']").click(function (e) {
            if (e.target && Page_IsValid) {
                var SkipDoubleClickCheck = 
$(this).attr('SkipDoubleClickCheck');
                if (SkipDoubleClickCheck != 'undefined' && SkipDoubleClickCheck == "true") {  //Skip if element has a specific attribute
                    return;
                }
                var attr = $(this).attr('submitting');
                if (typeof attr !== 'undefined' && attr !== false) { // If button has submitting attribute, then do not submit it again.
                    $(this).prop('disabled', true);
                    $(this).removeAttr("submitting");
                    e.preventDefault();
                }
                else {
                    $(this).attr("submitting", "true"); // Adding "submitting" attribute to prevent multiple submissions.
                }
            }
        });

implement this property that needed to be set in button SkipDoubleClickCheck="true"

<asp:Button ID="btnSignoff" runat="server" text="Sign Off & Send" SkipDoubleClickCheck="true" CssClass="btn btn-primary" OnClientClick="openSignOffModal(); return false;"/></td>

Button gets disabled when clicked second time

1 Answers1