javascript - 使用 jQuery 禁用动态 id 按钮

Question

我正在使用 VB.Net、MVC 5、razor 和 jQuery。我有一个 Razor View ，它创建我试图在用户单击时禁用的按钮。我通常使用 jQuery 完成此任务:

$('#id').prop("disabled", true);

我的任务对我来说是新的，因为我的按钮是这样生成的:

@For i As Integer = 0 To Model.hrmnValues.Count - 1
    @<div class="col-md-3">
        <a class="btn btn-primary btn-md" href="#" id="@Model.inventoryCategoryAttIDs(i)" 
           onclick="acceptChange('@Model.hrmnValues(i)',
              @Model.inventoryCategoryAttIDs(i), @Model.uniqueItemID)">Accept Change</a>
    </div>      
Next

我的 onClick 函数与此类似:

function acceptChange(newValue, categoryAttID, itemID) {
    $('#categoryAttID').prop("disabled", true);
}

这显然不起作用，因为它正在寻找名称为categoryAttID的id。我还尝试将categoryAttID放入它自己的变量中，如下所示:

var idToDisable = "#" + categoryAttID;

然后将 idToDisable 放入 jQuery 调用中以禁用该按钮，但这不起作用。

鉴于这种情况，我如何禁用被单击的按钮？

该页面上会有多个按钮使用该函数，该函数实际上执行ajax调用。这个想法是限制用户对每个按钮执行一次 ajax 调用。

html 渲染如下:

<div class="row">
    <div class="col-md-3">
        <font>First Name</font>
    </div>
    <div class="col-md-3">
        <font>John</font>
    </div>
    <div class="col-md-3">
        <font>No Record Found</font>
    </div>
    <div class="col-md-3">
        <a class="btn btn-primary btn-md" href="#" id="2" 
                   onclick="acceptChange('CHRISTOPHER', 2, 0)">Accept Change</a>
    </div>
</div>        
<div class="row">
    <div class="col-md-3">
        <font>Last Name</font>
    </div>
    <div class="col-md-3">
        <font>MURRAY</font>
    </div>
    <div class="col-md-3">
        <font>No Record Found</font>
    </div>
    <div class="col-md-3">
        <a class="btn btn-primary btn-md" href="#" id="3" 
                   onclick="acceptChange('MURRAY', 3, 0)">Accept Change</a>
    </div>

Answer 1

您已经将按钮的 id 作为第二个参数传递给函数 -

acceptChange('@Model.hrmnValues(i)',@Model.inventoryCategoryAttIDs(i), @Model.uniqueItemID)

所以你可以将你的函数更改为 -

function acceptChange(newValue, categoryAttID, itemID) {
  $('#' + categoryAttID).prop("disabled", true);
}

此外，如果您想在点击时禁用元素，则没有可用于链接的禁用属性(请参阅 - Mozilla Developer Network )，请尝试使用按钮。

由于您在更改按钮链接后似乎正在使用 Bootstrap ，因此您可能希望将功能更改为 -

function acceptChange(newValue, categoryAttID, itemID) {
  $('#' + categoryAttID).prop("disabled", true);
  $('#' + categoryAttID).addClass("disabled");
}