How to disable only the button that was clicked , which is under a specific class

Question

I have a form that contains 10 input buttons with .btn-primary class , and i wrte the following script to disable the button when clicking on it :-

$('form').submit(function() {

    $('input.btn-primary').prop("disabled", "disabled");

})

but the problem i am facing is that when the user click on an input button, all the other 9 input buttons will be displayed. so is there a way to modify my current script so that only the input button that have been clicked get disabled. my current approach will disable all the buttons that are under the .btn-primary class ? Thanks

here is how the form looks like:-

<input type="submit" value="Add To TMS" class="btn btn-primary"/>
    <img src="/Content/Ajax-loader-bar.gif" class="loadingimage" id="16202imag"/>
</form>
        </td>





    </tr>
    <tr>
         <td>
            VMware Virtual Platform
        </td>
        <td>
            none
        </td>
        <td>
            see20
        </td>
        <td>

             a
        </td>
        <td>
            test site
        </td>
        <td>
            VMware Virtual Platform
        </td>
        <td>
            In Store
        </td>
         <td id = "18605">



<form action="/VirtualMachine/CreateOnTMS" data-ajax="true" data-ajax-loading="#18605imag" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#18605" id="form1" method="post"><input name="__RequestVerificationToken" type="hidden" value="eiSEILmh7BnQESGGGWhE534pbYX_ZYBQjrrETGZc-nTyNzS8fymRWifu7M8Q8qDHMZKmLXuKh64rP3lzigfPgwE4CckHO8bRA7FiPxVjh_jNSxF9rngl8HvOXEbzT7910" />   <span class="f"> Role</span>
<select class="SmallDropDown" data-val="true" data-val-number="The field Role must be a number." data-val-required="The Role field is required." id="VirtualMachine_RoleID" name="VirtualMachine.RoleID"><option value="">Choose...</option>
<option value="1">SQL Server</option>
<option value="2">Virtual Center</option>
<option value="3">ESX</option>
<option value="4">Web Server</option>
</select><span class="field-validation-valid" data-valmsg-for="VirtualMachine.RoleID" data-valmsg-replace="true"></span>   <span class="f">Server</span>
<select class="SmallDropDown" data-val="true" data-val-number="The field Hypervisor Server Tag must be a number." data-val-required="The Hypervisor Server Tag field is required." id="VirtualMachine_ServerID" name="VirtualMachine.ServerID"><option value="">Choose...</option>
<option value="552">S122222244</option>
<option value="557">S122222246</option>
<option value="565">S122222247</option>
<option value="568">S122222248</option>
<option value="579">S122222250</option>
</select><span class="field-validation-valid" data-valmsg-for="VirtualMachine.ServerID" data-valmsg-replace="true"></span><input id="ResourceID" name="ResourceID" type="hidden" value="18605" /> <input type="submit" value="Add To TMS" class="btn btn-primary"/>
    <img src="/Content/Ajax-loader-bar.gif" class="loadingimage" id="18605imag"/>
</form>
        </td>





    </tr>
    <tr>
         <td>
            VMware Virtual Platform
        </td>
        <td>
            none
        </td>
        <td>
            see33
        </td>
        <td>

             bb
        </td>
        <td>
            testsitefrom it360
        </td>
        <td>
            VMware Virtual Platform
        </td>
        <td>
            In Store
        </td>
         <td id = "18610">



<form action="/VirtualMachine/CreateOnTMS" data-ajax="true" data-ajax-loading="#18610imag" data-ajax-method="POST" data-ajax-mode="replace" data-ajax-update="#18610" id="form2" method="post"><input name="__RequestVerificationToken" type="hidden" value="RyF2VRjwRlbWgRfqL377UJLaT8R1SANDhjeqwGy59_CX8HWmkzED91qIwip_rY4wdzKEelGlHTbe2mCa4bV0sT6juOn2yAm39Plto7JAygBPOrPS8ThECfFVYjhkuN9m0" />   <span class="f"> Role</span>
<select class="SmallDropDown" data-val="true" data-val-number="The field Role must be a number." data-val-required="The Role field is required." id="VirtualMachine_RoleID" name="VirtualMachine.RoleID"><option value="">Choose...</option>
<option value="1">SQL Server</option>
<option value="2">Virtual Center</option>
<option value="3">ESX</option>
<option value="4">Web Server</option>
</select><span class="field-validation-valid" data-valmsg-for="VirtualMachine.RoleID" data-valmsg-replace="true"></span>   <span class="f">Server</span>
<select class="SmallDropDown" data-val="true" data-val-number="The field Hypervisor Server Tag must be a number." data-val-required="The Hypervisor Server Tag field is required." id="VirtualMachine_ServerID" name="VirtualMachine.ServerID"><option value="">Choose...</option>
<option value="552">S122222244</option>
<option value="557">S122222246</option>
<option value="565">S122222247</option>
<option value="568">S122222248</option>
<option value="579">S122222250</option>
</select><span class="field-validation-valid" data-valmsg-for="VirtualMachine.ServerID" data-valmsg-replace="true"></span><input id="ResourceID" name="ResourceID" type="hidden" value="18610" /> <input type="submit" value="Add To TMS" class="btn btn-primary"/>
    <img src="/Content/Ajax-loader-bar.gif" class="loadingimage" id="18610imag"/>
</form>

Answer 1

Here's a FIDDLE works on form submit.

<form>
  <button id="id1" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id2" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id3" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id4" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id5" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id6" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id7" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id8" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id9" type="submit" name="submit" class="btn-primary">Submit</button>
</form>
<form>
  <button id="id10" type="submit" name="submit" class="btn-primary">Submit</button>
</form>


$('form').submit(function() {
  $(this).find('.btn-primary').prop("disabled", "disabled");
});

P.S. You have duplicate ID's on ResourceID !

Answer 2

This will cause it to be disabled when clicked (until the page reloads, anyway...)

$('button').on('click', function(e) {
    $(this).prop('disabled', true);
});

Answer 3

Try this :

$('form').submit(function() {

     $(this).prop("disabled", "disabled");

})