Wyłączanie i włączanie przycisku wprowadzania HTML

250

Mam więc taki przycisk:

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

Jak mogę je wyłączyć i włączyć, kiedy chcę? Próbowałem, disabled="disable"ale włączenie go z powrotem jest problemem. Próbowałem ustawić wartość false, ale to nie pozwoliło.

k.ken
źródło
Co masz na myśli, aby włączyć to z powrotem? Po wyłączeniu nie możesz ponownie włączyć tej samej metody Me()Mam nadzieję, że wiesz (bo to jest wyłączone)
cjds
2
Próbuję wyłączyć i włączyć przycisk, gdy zdarzają się określone zdarzenia.
k.ken 12.12.12

Odpowiedzi:

461

Korzystanie z Javascript

  • Wyłączanie przycisku HTML

    document.getElementById("Button").disabled = true;
  • Włączanie przycisku HTML

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


Korzystanie z jQuery

Wszystkie wersje jQuery przed 1.6

  • Wyłączanie przycisku HTML

    $('#Button').attr('disabled','disabled');
  • Włączanie przycisku HTML

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

Wszystkie wersje jQuery po wersji 1.6

  • Wyłączanie przycisku HTML

    $('#Button').prop('disabled', true);
  • Włączanie przycisku HTML

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

PS Zaktualizowałem kod na podstawie zmian jquery 1.6.1 . Jako sugestię zawsze używaj najnowszych plików jquery i prop()metody.

palašn
źródło
Czy potrzebuję tam atrybutów, aby to działało? like
disables
Nie, w środku $(document).readymożesz zadzwonić $('#Button').attr('disabled','disabled');. Spowoduje to wyłączenie przycisku przy ładowaniu strony. A kiedy zdarzają się pewne zdarzenia, możesz zadzwonić, $('#Button').removeAttr('disabled');aby włączyć je ponownie ...
palaśń 12.12
jak dodać szary styl, jeśli jest wyłączony?
Lei Yang
1
@LeiYang możesz dodać trochę css w ten sposób
palaśń
Zauważ tylko, że prawda i fałsz są wartościami logicznymi, a nie ciągami, jak poprawnie napisał palash
Marco
24

Ponieważ wyłączasz go w pierwszej kolejności, sposobem włączenia go jest ustawienie jego disabledwłaściwości jako false.

Aby zmienić jego disabledwłaściwość w JavaScript, użyj tego:

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

I oczywiście, aby wyłączyć to ponownie, użyłbyś truezamiast tego.

Ponieważ otagowałeś pytanie również jQuery, możesz użyć tej .propmetody. Coś jak:

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

Jest to w nowszych wersjach jQuery. Starszym sposobem na to jest dodanie lub usunięcie takiego atrybutu:

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

Sama obecność disabledwłaściwości wyłącza element, więc nie można ustawić jego wartości jako „fałsz”. Nawet następujące elementy powinny wyłączyć element

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

Musisz całkowicie usunąć atrybut lub ustawić jego właściwość.

Ian
źródło
co jeśli chcę, aby przycisk był początkowo włączony, a później wyłączony; Próbowałem też włączyć = „prawda”. Czy włączenie jest właściwym słowem kluczowym?
k.ken 12.12.12
2
@ k.ken Nie, słowo kluczowe jest „wyłączone”. Jeśli chcesz, aby przycisk był początkowo włączony, nie umieszczaj go disabledwcale. Po prostu użyj <input type="button" value="Submit" />. A przy zmianie statusu użyj .prop("disabled", true);(lub false)
Ian
10

Możesz to zrobić dość łatwo za pomocą prostego JavaScript, bez bibliotek.

Włącz przycisk

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

Wyłącz przycisk

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

Nie są potrzebne biblioteki zewnętrzne.

Jon
źródło
4

atrybut disable ma tylko jeden parametr. jeśli chcesz to włączyć, musisz usunąć całą rzecz, a nie tylko zmienić wartość.

Raz siłowałem się z niedźwiedziem.
źródło
3
$(".btncancel").button({ disabled: true });

Tutaj „btncancel” to nazwa klasy przycisku.

Hamid NK
źródło
0

Bez jQuery wyłączenie wprowadzania danych będzie prostsze

Button.disabled=1;

Kamil Kiełczewski
źródło
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
źródło
-2

To na pewno zadziała.

Aby wyłączyć przycisk

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

Aby włączyć przycisk

$('#btn_id').button('enable');
Shalika
źródło
-6

Trzymaj się php ...

Dlaczego nie tylko pozwolić, aby przycisk pojawił się po spełnieniu powyższych kryteriów?

<?
if (whatever == something) {
    $display = '<input id="Button" type="button" value="+" style="background-color:grey" onclick="Me();"/>';
    return $display;
}
?>
My Gull Wheels On
źródło