Question

我使用VB.Net，MVC 5，razor和jQuery。我有一个剃刀视图，创建按钮，我试图禁用用户点击。我通常使用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）。

由于您在更改指向链接后似乎正在使用引导程序，因此可能需要将功能更改为 -

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

用jQuery禁用动态id按钮

1 个答案: