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);

Answer 2

虽然CSS允许您根据其属性值来定位兄弟元素，但这只会让您获得解决方案的一半。例如，以下内容将隐藏您的提交按钮：

#first[value='Mike'] ~ #submit_button {
    display: none;
}

这会将同一容器中任何#submit_button元素的display属性设置为none，而不是任何#first元素，其值为Mike。这适用于最初隐藏按钮，以及在用户键入键名时隐藏它。但是，由于缺少非等于运算符，当值不目标名称时，CSS无法帮助我们恢复可见性。

我们的其他选择是使用JavaScript。我们将创建一个执行此评估的函数，并根据名字字段的值显示或隐藏提交按钮：

(function () {

    "use strict";

    // Reference all of our key elements, and values
    var name = "Mike",
        form = document.getElementById("editform"),
        inpt = document.getElementById("first"),
        sbmt = document.getElementById("submit_button");

    // A function to toggle visibility based on field value
    function setVisibility() {
        sbmt.style.display = (inpt.value.trim() === name) ? "none" : "";
    }

    // Call this function whenever input occurs on the field
    form.addEventListener("input", setVisibility, false);

    // Fire it once upon load for initial evaluation
    setVisibility();

}());

根据用户提供的数据，这可以让您了解隐藏/显示提交按钮的位置。

小提琴：http://jsfiddle.net/jonathansampson/j2MRQ/

使用CSS或Javascript隐藏条件按钮

2 个答案: