使用jQuery禁用动态id按钮

disable dynamic id buttons with jQuery

本文关键字：id 按钮 动态 jQuery 使用      更新时间：2023-09-26

我使用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>

您已经将按钮的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");
}
相关文章：