禁用演示的提交按钮

Question

我正在尝试为演示帐户禁用选项卡式菜单页面的提交按钮。不幸的是，3 个菜单选项卡中的每一个都具有相同的按钮 ID -“Mod0EditRecord”。我不能重命名按钮 ID，也不能改用 class，因为它是由在线数据库呈现的。

<input type="submit" value="Update" name="Mod0EditRecord" id="Mod0EditRecord">
<input type="submit" value="Update" name="Mod0EditRecord" id="Mod0EditRecord">
<input type="submit" value="Update" name="Mod0EditRecord" id="Mod0EditRecord">

我可以成功地将第一个按钮的属性设置为禁用，如下所示

if (login == 'demo.account')
{
document.getElementById('Mod0EditRecord').setAttribute("disabled","disabled");
document.write("<br><p style=\"text-align:left; padding-left:100px; font-size:10px;\">** Update button is disabled for the demo **</p>");
} 
else
{
document.getElementById('Mod0EditRecord').removeAttribute("disabled");
}

我正在寻找有关如何为其他两个设置属性的指导。

提前致谢

Answer 1

您可以使用像 jQuery 这样的 javascript dom 操作库来遍历 HTML 节点并根据需要添加类/更改 id。

如果你必须特别坚持这些属性，那么你可以在 jQuery 中做这样的事情：

$('input[name="Mod0EditRecord"]').eq(0).attr('disabled','disabled') 
//this is the first input, change .eq(index) to the value you need

Answer 2

document.getElementById 的返回值应该是一个数组。你可以遍历它们。

var elem = document.getElementById('Mod0EditRecord');
    for(var i = 0; i < elem.length; i++)
    {
      elem[i].setAttribute("disabled","disabled");
    }

或者，如果您使用的是 jquery，您可以使用 .next() 方法来检索其他两个元素。

Answer 3

您不能使用 document.getElementById ，因为它会返回具有该 ID 的第一个元素。如果您使用的是 VanillaJS，我不会使用 jQuery，因为仅为此功能下载一个库是毫无用处的。

这就是你要做的：使用document.getElementsByTagName 获取所有input 类型，检查它是否来自type submit 和disable。

var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++ ) {
    if(inputs[i].type === "submit") {
        var submitbtn = inputs[i];
        submitbtn.setAttribute("disabled", "disabled");
    }
}

JSFiddle.