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

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

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

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

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

Luaskan cuplikan

— 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