Стилизация кнопки с использованием javascript и OnClientClick

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.Вот мой код, однако у меня все та же проблема:

    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, чтобы никто не мог просто нажать и нажать клавишу ввода. Может быть не совсем то, что вы ищете, но это делает работу.

Если вы хотите отключить кнопку и стилизовать ее после этого, используйте предложение от пользователя 503034 с одним дополнительным изменением, вместо того, чтобы просто делать [отключено] в CSS, сделать input [disabled = "disabled"], input.disabled это будет работать во всех основных браузерах.

Answer 2

Может быть , что - это то, что вы ищете.