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