Desativando e Ativando um Botão de Entrada HTML


250

Então, eu tenho um botão como este:

<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>

Como posso desativá-lo e ativá-lo quando quiser? Eu tentei, disabled="disable"mas ativá-lo de volta é um problema. Tentei defini-lo novamente como false, mas isso não o habilitou.


Como assim, habilitá-lo de volta? Uma vez que você desativá-lo você não pode reativá-lo a partir do mesmo método Me()que eu espero que você saiba (porque isso é desativado)
cjds

2
O que estou tentando fazer é desativar e ativar o botão quando certos eventos acontecem.
k.ken

Respostas:


461

Usando Javascript

  • Desativando um botão html

    document.getElementById("Button").disabled = true;
  • Ativando um botão html

    document.getElementById("Button").disabled = false;
  • Demo Here


Usando jQuery

Todas as versões do jQuery anteriores à 1.6

  • Desativando um botão html

    $('#Button').attr('disabled','disabled');
  • Ativando um botão html

    $('#Button').removeAttr('disabled');
  • Demo Here

Todas as versões do jQuery após 1.6

  • Desativando um botão html

    $('#Button').prop('disabled', true);
  • Ativando um botão html

    $('#Button').prop('disabled', false);
  • Demo Here

PS Atualizou o código com base nas alterações do jquery 1.6.1 . Como sugestão, sempre use os arquivos jquery mais recentes e o prop()método


Preciso dos atributos existentes para que isso funcione? como disables = "desativar"
k.ken 12/12/12

Não, por dentro $(document).readyvocê pode ligar $('#Button').attr('disabled','disabled');. Isso desativará o botão no carregamento da página. E quando certos eventos acontecem, você pode ligar $('#Button').removeAttr('disabled');para habilitá-lo novamente ...
palaѕн

como adicionar estilo cinza se desativado?
Lei Yang

1
@LeiYang você pode adicionar alguns css como este
palaѕн 19/09/19

Aviso justo que o verdadeiro eo falso são boolean, nem cordas, como palash corretamente escreveu
Marco

24

Como você está desativando-o em primeiro lugar, a maneira de ativá-lo é definir sua disabledpropriedade como false.

Para alterar sua disabledpropriedade em Javascript, use este:

var btn = document.getElementById("Button");
btn.disabled = false;

E, obviamente, para desativá-lo novamente, você usaria true.

Como você também marcou a pergunta com o jQuery, você pode usar o .propmétodo Algo como:

var btn = $("#Button");
btn.prop("disabled", true);   // Or `false`

Isso está nas versões mais recentes do jQuery. A maneira mais antiga de fazer isso é adicionar ou remover um atributo da seguinte maneira:

var btn = $("#Button");
btn.attr("disabled", "disabled");
// or
btn.removeAttr("disabled");

A mera presença da disabledpropriedade desabilita o elemento, portanto você não pode definir seu valor como "false". Mesmo o seguinte deve desativar o elemento

<input type="button" value="Submit" disabled="" />

Você precisa remover o atributo completamente ou definir sua propriedade.


e se eu quiser que o botão seja ativado inicialmente e depois desativado mais tarde; Eu também tentei enable = "true". A ativação é a palavra-chave adequada?
k.ken 12/12/12

2
@ k.ken Não, a palavra-chave está "desativada". Se você deseja ativar o botão inicialmente, não coloque o atributo disabled. Apenas use <input type="button" value="Submit" />. E quando mudar o status, utilize .prop("disabled", true);(ou false)
Ian

10

Você pode fazer isso facilmente com JavaScript direto, sem necessidade de bibliotecas.

Ativar um botão

document.getElementById("Button").disabled=false;

Desativar um botão

 document.getElementById("Button").disabled=true;

Nenhuma biblioteca externa necessária.


4

o atributo desativar tem apenas um parâmetro. se você quiser reativá-lo, precisará remover a coisa toda, não apenas alterar o valor.


3
$(".btncancel").button({ disabled: true });

Aqui 'btncancel' é o nome da classe do botão.


0

Sem jQuery, a entrada de desativação será mais simples

Button.disabled=1;


0
 <!--Button Disable Script-->
    <script type="text/javascript">
        function DisableButton() {
            document.getElementById("<%=btnSave.ClientID %>").disabled = true;
        }
        window.onbeforeunload = DisableButton;
    </script>
    <!--Button Disable Script-->

-2

Isso certamente vai funcionar.

Para desativar um botão

$('#btn_id').button('disable');

Para habilitar um botão

$('#btn_id').button('enable');

-6

Atenha-se ao php ...

Por que não apenas permitir que o botão apareça quando os critérios acima forem atendidos.

<?
if (whatever == something) {
    $display = '<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>';
    return $display;
}
?>
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.