Menonaktifkan dan mengaktifkan tombol input html

250

Jadi saya punya tombol seperti ini:

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

Bagaimana saya bisa menonaktifkan dan mengaktifkannya ketika saya mau? Saya sudah mencoba disabled="disable"tetapi mengaktifkannya kembali adalah masalah. Saya mencoba mengaturnya kembali ke false tetapi itu tidak mengaktifkannya.

javascript jquery k.ken
sumber
Apa maksudmu mengaktifkannya kembali? Setelah Anda menonaktifkannya, Anda tidak dapat mengaktifkannya kembali dari metode yang sama Me()Saya harap Anda tahu (karena itu dinonaktifkan)
cjds
2
Yang saya coba lakukan adalah menonaktifkan dan mengaktifkan tombol ketika peristiwa tertentu terjadi.
k.ken

Jawaban:

461

Menggunakan Javascript

  • Menonaktifkan tombol html

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

  • Mengaktifkan tombol html

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

  • Demo di Sini

Menggunakan jQuery

Semua versi jQuery sebelum 1.6

  • Menonaktifkan tombol html

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

  • Mengaktifkan tombol html

    $('#Button').removeAttr('disabled');

  • Demo di Sini

Semua versi jQuery setelah 1.6

  • Menonaktifkan tombol html

    $('#Button').prop('disabled', true);

  • Mengaktifkan tombol html

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

  • Demo di Sini

PS Memperbarui kode berdasarkan perubahan jquery 1.6.1 . Sebagai saran, selalu gunakan file jquery terbaru dan prop()metodenya.

palaѕн
sumber
Apakah saya perlu atribut di sana agar ini berfungsi? like disables = "disable"
k.ken
Tidak, di dalam $(document).readykamu bisa menelepon $('#Button').attr('disabled','disabled');. Ini akan menonaktifkan tombol saat memuat halaman. Dan ketika peristiwa tertentu terjadi, Anda dapat menelepon $('#Button').removeAttr('disabled');untuk mengaktifkannya lagi ...
palaѕн
bagaimana cara menambahkan gaya abu-abu jika dinonaktifkan?
Lei Yang
1
@LeiYang Anda dapat menambahkan beberapa css seperti ini
palaѕн
Perhatikan saja bahwa benar dan salah adalah boolean, bukan string, seperti yang ditulis palash dengan benar
Marco
24

Karena Anda menonaktifkannya, cara untuk mengaktifkannya adalah dengan menyetel disabledpropertinya false.

Untuk mengubah disabledpropertinya di Javascript, Anda menggunakan ini:

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

Dan jelas untuk menonaktifkannya lagi, Anda akan menggunakannya true.

Karena Anda juga menandai pertanyaan dengan jQuery, Anda dapat menggunakan .propmetode ini. Sesuatu seperti:

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

Ini ada di versi jQuery yang lebih baru. Cara lama untuk melakukan ini adalah dengan menambahkan atau menghapus atribut seperti:

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

Kehadiran disabledproperti semata-mata menonaktifkan elemen, sehingga Anda tidak dapat menetapkan nilainya sebagai "salah". Bahkan yang berikut ini harus menonaktifkan elemen

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

Anda harus menghapus atribut sepenuhnya atau mengatur propertinya.

Ian
sumber
bagaimana jika saya ingin tombol diaktifkan pada awalnya kemudian dinonaktifkan kemudian; Saya juga mencoba mengaktifkan = "true". Apakah mengaktifkan kata kunci yang tepat ??
k.ken
2
@ k.ken Tidak, kata kunci "dinonaktifkan". Jika Anda ingin tombol diaktifkan pada awalnya, jangan masukkan atribut disabledsama sekali. Gunakan saja <input type="button" value="Submit" />. Dan ketika mengubah status, gunakan .prop("disabled", true);(atau false)
Ian
10

Anda dapat melakukan ini dengan cukup mudah hanya dengan JavaScript langsung, tidak perlu perpustakaan.

Aktifkan tombol

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

Nonaktifkan tombol

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

Tidak diperlukan perpustakaan eksternal.

Jon
sumber
4

atribut disable hanya memiliki satu parameter. jika Anda ingin mengaktifkannya kembali Anda harus menghapus semuanya, tidak hanya mengubah nilainya.

Saya pernah bergulat dengan beruang.
sumber
3 
$(".btncancel").button({ disabled: true });

Di sini 'btncancel' adalah nama kelas tombol.

Hamid NK
sumber
0

Tanpa jQuery, menonaktifkan input akan lebih mudah

Button.disabled=1;

Tampilkan cuplikan kode

Kamil Kiełczewski
sumber
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
sumber
-2

Ini pasti akan berhasil.

Untuk Menonaktifkan tombol

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

Untuk Mengaktifkan tombol

$('#btn_id').button('enable');
Shalika
sumber
-6

Tetap di php ...

Mengapa tidak hanya mengizinkan tombol muncul setelah kriteria di atas terpenuhi.

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