如何仅禁用特定类下的单击按钮

Question

我有一个包含 10 个带有 .btn-primary 类的输入按钮的表单，我编写了以下脚本以在单击它时禁用该按钮：-

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

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

})

但我面临的问题是，当用户单击一个输入按钮时，将显示所有其他 9 个输入按钮。那么有没有办法修改我当前的脚本，以便只有已单击的输入按钮被禁用。我目前的方法将禁用 .btn-primary 类下的所有按钮？ 谢谢

这是表单的样子：-

<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

这里有一个FIDDLE 用于表单提交。

<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");
});

附：您在 ResourceID 上有重复的 ID！

Answer 2

这将导致它在单击时被禁用（直到页面重新加载，无论如何...）

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

Answer 3

试试这个：

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

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

})