Tetapkan butang lumpuhkan dalam jquery

Dalam pembangunan web, kami selalunya perlu melaksanakan beberapa fungsi interaktif melalui JavaScript, antaranya melumpuhkan butang tetapan adalah keperluan biasa. Sebagai perpustakaan JavaScript yang cekap, jQuery menyediakan API yang mudah untuk melaksanakan kawalan melumpuhkan butang. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menetapkan butang untuk dilumpuhkan.

1. Lumpuhkan atribut butang

Dalam HTML, butang boleh dilumpuhkan dengan menetapkan atribut yang dilumpuhkan bagi elemen butang. Sebagai contoh, kami boleh mentakrifkan kod HTML berikut untuk mencipta butang:

<button id="myButton">点击我</button>

Untuk melumpuhkan butang, hanya tetapkan atribut yang dilumpuhkan:

$("#myButton").prop("disabled", true);

Dalam kod di atas, kami menggunakan jQuery The prop () fungsi, yang boleh menetapkan atau mendapatkan nilai atribut sesuatu elemen. Di sini, kami menetapkan sifat dilumpuhkan butang kepada benar, yang melumpuhkan butang.

2. Melumpuhkan status butang

Selain menetapkan sifat butang, kami juga boleh mengawal secara langsung status butang untuk mencapai pelumpuhan. Dalam jQuery, anda boleh menggunakan fungsi addClass() dan removeClass() untuk menambah atau mengalih keluar nama kelas, dengan itu mengubah keadaan elemen. Sebagai contoh, kita boleh mentakrifkan gaya yang dilumpuhkan dahulu:

.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

Dalam gaya di atas, kami menetapkan ketelusan elemen kepada 0.5, menetapkan penuding tetikus kepada tidak dibenarkan dan melumpuhkan acara tetikus elemen tersebut. , dengan itu mencapai Lumpuhkan kesan butang.

Kemudian, dalam JavaScript, kita boleh menambah gaya melalui fungsi addClass() untuk melumpuhkan butang:

$("#myButton").addClass("disabled");

Dalam kod di atas, kami menggunakan fungsi addClass() jQuery, Tambah " dilumpuhkan" gaya ke butang. Dengan cara ini, butang dilumpuhkan.

Jika anda perlu mendayakan butang, hanya gunakan fungsi removeClass() untuk mengalih keluar gaya "dilumpuhkan":

$("#myButton").removeClass("disabled");

Dengan cara ini, butang didayakan.

3. Lumpuhkan semua butang

Kadangkala, kita perlu melumpuhkan atau mendayakan semua butang dalam halaman web sekali gus, kita boleh menggunakan fungsi setiap() jQuery untuk melintasi semua butang elemen dan melaksanakan operasi yang sepadan. Sebagai contoh, untuk melumpuhkan semua butang, anda boleh menulis kod JS berikut:

$("button").each(function() {
  $(this).prop("disabled", true);
});

Dalam kod di atas, kami menggunakan fungsi each() jQuery untuk melintasi semua elemen butang dan menetapkan atribut disablednya kepada true , dengan itu melumpuhkan semua butang.

Untuk mendayakan semua butang, hanya tetapkan atribut yang dilumpuhkan kepada palsu:

$("button").each(function() {
  $(this).prop("disabled", false);
});

Dengan cara ini, semua butang didayakan.

Ringkasan

Dalam pembangunan web, melumpuhkan butang kawalan ialah operasi biasa. Kesan melumpuhkan butang boleh dicapai dengan mudah menggunakan jQuery, sama ada dengan menetapkan sifat elemen butang atau dengan mengawal gaya butang. Perlu diingatkan bahawa butang melumpuhkan harus bersyarat dan tidak boleh disalahgunakan, jika tidak, ia akan menjejaskan pengalaman pengguna.

Atas ialah kandungan terperinci Tetapkan butang lumpuhkan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!