Désactiver et activer un bouton d'entrée html

250

J'ai donc un bouton comme celui-ci:

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

Comment puis-je le désactiver et l'activer quand je le souhaite? J'ai essayé disabled="disable"mais le réactiver est un problème. J'ai essayé de le remettre à faux mais cela ne l'a pas permis.

javascript jquery

— k.ken
source

Que voulez-vous dire le réactiver? Une fois que vous l'avez désactivé, vous ne pouvez pas le réactiver à partir de la même méthode, Me()j'espère que vous le savez (car il est désactivé)

— cjds

2

Ce que j'essaie de faire, c'est de désactiver et d'activer le bouton lorsque certains événements se produisent.

— k.ken

461

Utiliser Javascript

Désactiver un bouton html

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

Activer un bouton html

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

Démo ici

Utilisation de jQuery

Toutes les versions de jQuery antérieures à 1.6

Désactiver un bouton html

$('#Button').attr('disabled','disabled');

Activer un bouton html
```
$('#Button').removeAttr('disabled');
```
Démo ici

Toutes les versions de jQuery après 1.6

Désactiver un bouton html
```
$('#Button').prop('disabled', true);
```
Activer un bouton html
```
$('#Button').prop('disabled', false);
```
Démo ici

PS Mise à jour du code basé sur les changements de jquery 1.6.1 . Comme suggestion, utilisez toujours les derniers fichiers jquery et la prop()méthode.

— palasan
source

Ai-je besoin des attributs pour que cela fonctionne? comme disables = "disable"

— k.ken

Non, à l'intérieur, $(document).readyvous pouvez appeler $('#Button').attr('disabled','disabled');. Cela désactivera le bouton lors du chargement de la page. Et lorsque certains événements se produisent, vous pouvez appeler $('#Button').removeAttr('disabled');pour le

— réactiver

comment ajouter un style gris s'il est désactivé?

— Lei Yang

1

@LeiYang vous pouvez ajouter des CSS comme celui-ci

— palasan le

Notez juste que le vrai et le faux sont des booléens, pas des chaînes, comme l'a écrit correctement palash

— Marco

24

Puisque vous le désactivez en premier lieu, la façon de l'activer consiste à définir sa disabledpropriété sur false.

Pour changer sa disabledpropriété en Javascript, vous utilisez ceci:

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

Et évidemment, pour le désactiver à nouveau, vous utiliseriez à la trueplace.

Puisque vous avez également marqué la question avec jQuery, vous pouvez utiliser la .propméthode. Quelque chose comme:

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

C'est dans les nouvelles versions de jQuery. La méthode la plus ancienne consiste à ajouter ou supprimer un attribut comme ceci:

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

La simple présence de la disabledpropriété désactive l'élément, vous ne pouvez donc pas définir sa valeur sur "false". Même les éléments suivants devraient désactiver l'élément

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

Vous devez supprimer complètement l'attribut ou définir sa propriété.

— Ian
source

Et si je veux que le bouton soit activé initialement puis désactivé plus tard; J'ai également essayé enable = "true". L'activation est-elle le mot clé approprié?

— k.ken

2

@ k.ken Non, le mot-clé est "désactivé". Si vous voulez que le bouton soit activé initialement, ne mettez pas du tout l'attribut disabled. Utilisez simplement <input type="button" value="Submit" />. Et lorsque vous changez le statut, utilisez .prop("disabled", true);(ou false)

— Ian

10

Vous pouvez le faire assez facilement avec juste du JavaScript, aucune bibliothèque requise.

Activer un bouton

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

Désactiver un bouton

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

Aucune bibliothèque externe nécessaire.

— Jon
source

4

l'attribut disable n'a qu'un seul paramètre. si vous voulez le réactiver, vous devez supprimer le tout, pas seulement changer la valeur.

— Une fois je me suis battu contre un ours.
source

3

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

Ici, «btncancel» est le nom de classe du bouton.

— Hamid NK
source

0

Sans jQuery, la désactivation de l'entrée sera plus simple

Button.disabled=1;

Afficher l'extrait de code

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

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

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

Développer l'extrait

— Kamil Kiełczewski
source

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
source

-2

Cela fonctionnera sûrement.

Pour désactiver un bouton

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

Pour activer un bouton

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

— Shalika
source

-6

Tenez-vous en php ...

Pourquoi ne pas laisser le bouton apparaître uniquement une fois que les critères ci-dessus sont remplis.

<?
if (whatever == something) {
    $display = '<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>';
    return $display;
}
?>

— My Gull Wheels On
source