使用 javascript & 设计按钮样式客户端点击时

Question

我的网页上有一个 asp.net 按钮。

OnClientClick 代码禁用该按钮，以便用户不能多次提交。 它还将按钮的文本更改为“请稍候...”

到目前为止一切顺利！

问题是，因为它被禁用，“请稍候...”文本看起来很垃圾... 我如何设置按钮的样式，以便即使它被禁用，它看起来仍然在 javascript 中启用。

    <script type="text/javascript">
    function btnSubmit_ClientClick(Client) {
        var ok = Page_ClientValidate();
        if (ok) {


            Client.style.color = 'White';
            Client.style.backgroundColor = '#9A4D9E';

            Client.value = 'Please wait...';
            Client.disabled = true;
        }
    }
</script>

编辑开始：

这是启用的按钮：

这是禁用的按钮：

...如您所见，文本是灰色和白色的？

为了进一步清晰起见，@user503034 建议在 CSS 中使用 [disabled]。 这是我的代码，但我仍然遇到同样的问题：

    button[disabled]:active, button[disabled], input[type="reset"][disabled]:active, input[type="reset"][disabled], input[type="button"][disabled]:active, input[type="button"][disabled], select[disabled] > input[type="button"], select[disabled] > input[type="button"]:active, input[type="submit"][disabled]:active, input[type="submit"][disabled]
{
    color: Green;
    background-color: #9A4D9E;
    cursor: default;

}

Answer 1

你可以试试这个

<script type="text/javascript"> 
function btnSubmit_ClientClick(Client) { 
    var ok = Page_ClientValidate(); 
    if (ok) { 


        Client.style.color = 'White'; 
        Client.style.backgroundColor = '#9A4D9E'; 

        Client.value = 'Please wait...'; 
        if (Client.ClassName.indexOf("disabled")>0)
            return false;
        else
            Client.ClassName += " disabled";
    } 
} 

这不会完全禁用该按钮，但不会让您单击它。现在您可以按照自己想要的方式设计它。如果这是表单上的提交按钮，您还可以在表单上执行 onSubmit 并在那里返回 false，以防止有人只是按 Tab 键并按 Enter 键。可能不完全是您正在寻找的东西，但它确实可以完成工作。

如果您想禁用该按钮并在之后设置其样式，请使用 user503034 的建议进行一项额外的更改，而不是仅在 CSS 中执行 [disabled]，而是执行 input[disabled="disabled"], input.disabled 即可跨所有主要浏览器。

Answer 2

也许这就是您正在寻找的。