javascript - 使用 CSS 或 Javascript 有条件地隐藏按钮

Question

我有一个代码如下所示的页面:

<form id="editform" class="left " method="post" action="edit-account.php" name="editform">
<ul>
<li id="row_first">
<label for="first">First name</label>
<input id="first" type="text" value="Mike" name="first">
</li>
<li id="row_last">
<label for="last">Last name</label>
<input id="last" type="text" value="" name="last">
</li>
</ul>
<label for="submit_button"> </label>
<input id="submit_button" class="button" type="submit" value="Modify user profile" name="submit_button">
<input type="hidden" name="submitted" value="true">
</form>

我的目标是仅当“first”字段包含默认值“Mike”时才隐藏提交按钮。

在实践中，如果我使用这个 CSS:

#submit_button.button{ display: none; }

这很好地隐藏了按钮，但在所有情况下，不仅是当“Mike”是字段“first”的默认值时。

有机会使用 CSS 做到这一点吗？

请注意，我无权访问 HTML 页面。我只能修改外部 CSS 文件，该文件为我尝试更改的页面设置样式。

或者，如果您有 Javascript 解决方案，我通常可以使用它，因为我可以访问计划用于修改某些表单元素的外部 JS 文件。

Answer 1

CSS 不是功能性的，它是用于样式的，因此这在 CSS 中是不可能的。您需要使用 JS 来完成此任务。

更新:

这个 JS 应该适合你:

var element = document.getElementById("first");
var btn = document.getElementById("submit_button"); 

function checkIfMike() {
    if(element.value == "Mike") {
        btn.style.display = "none";
    } else {
        btn.style.display = "block";
    } 
}

checkIfMike();
element.addEventListener("keyup", checkIfMike);