Deaktivieren und Aktivieren einer HTML-Eingabeschaltfläche

250

Also habe ich einen Knopf wie diesen:

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

Wie kann ich es deaktivieren und aktivieren, wenn ich möchte? Ich habe versucht, disabled="disable"aber es wieder zu aktivieren ist ein Problem. Ich habe versucht, es wieder auf false zu setzen, aber das hat es nicht aktiviert.

javascript jquery k.ken
quelle

Was meinst du damit, es wieder zu aktivieren? Sobald Sie es deaktiviert haben, können Sie es nicht mehr mit derselben Methode wieder aktivieren. Me()Ich hoffe, Sie wissen es (weil es deaktiviert ist)

cjds

2

Ich versuche, die Schaltfläche zu deaktivieren und zu aktivieren, wenn bestimmte Ereignisse eintreten.

k.ken

461

Verwenden von Javascript

Deaktivieren einer HTML-Schaltfläche

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

Aktivieren einer HTML-Schaltfläche

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

Demo hier

Verwenden von jQuery

Alle Versionen von jQuery vor 1.6

Deaktivieren einer HTML-Schaltfläche

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

Aktivieren einer HTML-Schaltfläche
```
$('#Button').removeAttr('disabled');
```
Demo hier

Alle Versionen von jQuery nach 1.6

Deaktivieren einer HTML-Schaltfläche
```
$('#Button').prop('disabled', true);
```
Aktivieren einer HTML-Schaltfläche
```
$('#Button').prop('disabled', false);
```
Demo hier

PS Der Code wurde basierend auf den Änderungen in jquery 1.6.1 aktualisiert . Verwenden Sie als Vorschlag immer die neuesten JQuery-Dateien und die prop()Methode.

palaSн
quelle

Benötige ich die Attribute dort, damit dies funktioniert? like disables = "

disable

Nein, drinnen $(document).readykannst du anrufen $('#Button').attr('disabled','disabled');. Dadurch wird die Schaltfläche beim Laden der Seite deaktiviert. Und wenn bestimmte Ereignisse eintreten, können Sie anrufen $('#Button').removeAttr('disabled');, um es wieder zu aktivieren ...

Palasн

Wie füge ich einen grauen Stil hinzu, wenn er deaktiviert ist?

Lei Yang

1

@LeiYang können Sie einige CSS wie dieses

Palasso

Beachten Sie nur, dass wahr und falsch boolesch sind, keine Zeichenfolgen, wie Palash richtig geschrieben hat

Marco

24

Da Sie es zunächst deaktivieren, können Sie es aktivieren, indem Sie seine disabledEigenschaft als festlegen false.

Um seine disabledEigenschaft in Javascript zu ändern , verwenden Sie Folgendes:

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

Und natürlich, um es wieder zu deaktivieren, würden Sie truestattdessen verwenden.

Da Sie die Frage auch mit jQuery markiert haben, können Sie die .propMethode verwenden. Etwas wie:

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

Dies ist in den neueren Versionen von jQuery der Fall. Der ältere Weg, dies zu tun, besteht darin, ein Attribut wie folgt hinzuzufügen oder zu entfernen:

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

Das bloße Vorhandensein der disabledEigenschaft deaktiviert das Element, sodass Sie seinen Wert nicht als "false" festlegen können. Auch das Folgende sollte das Element deaktivieren

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

Sie müssen entweder das Attribut vollständig entfernen oder seine Eigenschaft festlegen.

Ian
quelle

Was ist, wenn die Schaltfläche zunächst aktiviert und später deaktiviert werden soll? Ich habe auch versucht enable = "true". Ist die Aktivierung das richtige Schlüsselwort?

k.ken

2

@ k.ken Nein, das Schlüsselwort ist "deaktiviert". Wenn Sie die Schaltfläche zunächst aktivieren möchten, geben Sie das Attribut disabledüberhaupt nicht ein. Einfach benutzen <input type="button" value="Submit" />. Und wenn Sie den Status ändern, verwenden Sie .prop("disabled", true);(oder false)

Ian

10

Sie können dies ziemlich einfach mit nur reinem JavaScript tun, ohne dass Bibliotheken erforderlich sind.

Aktivieren Sie eine Schaltfläche

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

Deaktivieren Sie eine Schaltfläche

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

Keine externen Bibliotheken erforderlich.

Jon
quelle

4

Das Attribut disable hat nur einen Parameter. Wenn Sie es wieder aktivieren möchten, müssen Sie das Ganze entfernen und nicht nur den Wert ändern.

I habe einmal mit einem Bär gekämpft.
quelle

3

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

Hier ist 'btncancel' der Klassenname der Schaltfläche.

Hamid NK
quelle

0

Ohne jQuery ist die Deaktivierung der Eingabe einfacher

Button.disabled=1;

Code-Snippet anzeigen

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

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

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

Erweitern Sie das Snippet

Kamil Kiełczewski
quelle

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
quelle

-2

Das wird sicher funktionieren.

So deaktivieren Sie eine Schaltfläche

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

So aktivieren Sie eine Schaltfläche

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

Shalika
quelle

-6

Bleib bei PHP ...

Lassen Sie die Schaltfläche nicht erst erscheinen, wenn eines der oben genannten Kriterien erfüllt ist.

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

Meine Möwenräder an
quelle

Deaktivieren und Aktivieren einer HTML-Eingabeschaltfläche

Antworten:

Verwenden von Javascript

Verwenden von jQuery