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

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

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

Answer 2

以下是表单提交的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");
});

P.S。您在ResourceID上有重复的ID！

Answer 3

试试这个：

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

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

})

如何仅禁用已单击的按钮，该按钮位于特定类下

3 个答案: