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.

javascript jquery

— k.ken
fonte

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

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

— palaşн
fonte

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.

— Ian
fonte

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.

— Jon
fonte

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.

— Uma vez eu lutei com um urso.
fonte

3

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

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

— Hamid NK
fonte

0

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

Button.disabled=1;

Mostrar snippet de código

function dis() {
  Button.disabled= !Button.disabled;
}

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

<button onclick="dis()">Toggle disable</button>

Expandir snippet

— Kamil Kiełczewski
fonte

0

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

— JIYAUL MUSTAPHA
fonte

-2

Isso certamente vai funcionar.

Para desativar um botão

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

Para habilitar um botão

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

— Shalika
fonte

-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;
}
?>

— Minhas rodas da gaivota
fonte