隐藏按钮，直到选中复选框，没有ID

Question

我需要隐藏一个按钮，直到单击一个复选框，但是我正在踩到别人的代码，他们使用的标签库没有在按钮标签中定义ID。这就是我所拥有的：

按钮代码：

<html:button name="Next" value="BTN.NEXT" styleClass="button" localeCd="<%= localeCd %>" onClick='Submit("Next")'/>

复选框代码：

<input type="checkbox" name="fedCheck" onclick="checkFed(this, 'myNext')" value="y" />

Javascript代码

function checkFed(ele, id) {
x = document.getElementById(id);
if (ele.checked == true) x.disabled = false;
else x.disabled = true;

}

我可以在单独的页面中使用它，但它所在的页面不允许按钮具有ID，因此每次都会崩溃。有什么建议吗？

Answer 1

不使用document.getElementById查找按钮，而是使用document.querySelector。

例如，如果页面上有一个“Next”作为其name属性值的按钮：

document.querySelector('button[name="Next"]')

Answer 2

有更好的方法可以做到这一点，听取点击事件等等...但是，只需修改你的代码就可以看到jsFiddle（注意：这假设这是唯一一个名为“Next”的元素）：

function checkFed(ele, name) {
    x = document.getElementsByName(name)[0];
    x.disabled = !x.disabled
}

并将onclick="checkFed(this, 'myNext')"更改为：

onclick="checkFed(this, 'Next')"

并将disabled="true"添加到按钮，以便禁用其初始状态

...还要注意，这实际上并没有像标题那样隐藏它，它会禁用它，就像问题的内容似乎要问一样。