Rumah > Artikel > hujung hadapan web > Membandingkan kaedah JavaScript: Dayakan atau lumpuhkan butang menggunakan jQuery vs. Vanila
Membandingkan kaedah JavaScript: Dayakan atau lumpuhkan butang menggunakan jQuery vs. Vanila
- PHPzasal
- 2023-08-28 17:05:09544semak imbas
Dalam artikel ini, kita akan membincangkan cara mendayakan atau melumpuhkan butang menggunakan JavaScript. Mula-mula, kita akan melihat cara ia berfungsi dalam JavaScript biasa, dan kemudian kita akan melihat cara melaksanakannya menggunakan jQuery.
JavaScript ialah salah satu teknologi teras Internet. Ia digunakan oleh kebanyakan laman web dan disokong oleh semua pelayar web moden tanpa memerlukan pemalam. Dalam siri ini, kami akan membincangkan petua dan helah berbeza yang akan membantu anda dengan pembangunan JavaScript harian anda.
Apabila anda menggunakan JavaScript, anda selalunya perlu mendayakan atau melumpuhkan butang berdasarkan tindakan tertentu. Biasanya apabila anda bekerja dengan borang, anda ingin memastikan butang hantar dilumpuhkan sehingga pengguna mengisi semua medan yang diperlukan dalam borang. Setelah pengguna mengisi semua medan yang diperlukan, anda ingin mendayakannya secara automatik supaya pengguna boleh mengklik butang untuk menyerahkan borang.
Dalam HTML, elemen butang mempunyai keadaannya sendiri, jadi anda boleh memastikannya didayakan atau dilumpuhkan. Sebagai contoh, anda boleh memastikan butang dilumpuhkan semasa borang dimuatkan. Kemudian, anda boleh mendayakannya dengan bantuan JavaScript.
Hari ini kita akan membincangkan cara mendayakan atau melumpuhkan butang menggunakan JavaScript dengan beberapa contoh praktikal.
Gunakan JavaScript Vanila untuk mendayakan atau melumpuhkan butang
Dalam bahagian ini, kami akan membincangkan contoh praktikal yang menunjukkan cara mendayakan atau melumpuhkan butang menggunakan JavaScript biasa.
Mari kita lihat contoh di bawah.
<html>
<head>
<script>
function toggleButton()
{
var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
if (username && password) {
document.getElementById('submitButton').disabled = false;
} else {
document.getElementById('submitButton').disabled = true;
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
Dalam contoh di atas, kami membina borang yang sangat mudah dengan beberapa medan teks dan butang hantar. Adalah penting untuk ambil perhatian bahawa selepas borang dimuatkan, butang serah dilumpuhkan. Kami menggunakan atribut disabled untuk menetapkan keadaan lalai butang serah kepada dilumpuhkan. disabled 属性将提交按钮的默认状态设置为禁用。
接下来，我们在用户名和密码输入字段上定义了 onchange 事件。因此，当用户更改这些字段的值时，就会触发 onchange 事件，该事件最终调用 toggleButton 函数。在 toggleButton 函数中，我们检查用户是否在两个必填字段中输入了值。如果是这种情况，我们将提交按钮的 disabled 属性设置为 false，这最终会启用提交按钮，以便用户可以单击该按钮。另一方面，如果用户名或密码字段为空，我们将 disabled 属性设置为 true，这将禁用提交按钮，以便用户无法单击它。
在上面的示例中，我们使用了输入提交按钮，但您也可以使用 HTML 按钮，如下例所示。
<button id="submitButton" disabled/>Submit</button>
这就是如何使用普通 JavaScript 来启用或禁用按钮。在下一节中，我们将了解如何使用 jQuery 库。
使用 jQuery 启用或禁用按钮
在本节中，我们将讨论如何借助 jQuery 库切换按钮的状态。
让我们修改一下上一节中讨论的示例。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script>
function toggleButton()
{
var username = $('#username').val();
var password = $('#password').val();
if (username && password) {
$('#submitButton').attr('disabled', false);
} else {
$('#submitButton').attr('disabled', true);
}
}
</script>
</head>
<body>
<div>
<form action="/submit.php" method="post">
Username:<input type="text" name="username" id="username" onchange="toggleButton()">
Password:<input type="password" name="password" id="password" onchange="toggleButton()">
<input id="submitButton" type="submit" value="Submit" disabled/>
</form>
</div>
</body>
</html>
首先，我们已经加载了 jQuery 库，以便我们可以在我们的函数中使用它。上面示例中唯一的区别是我们使用 jQuery 对象的 attr 方法来更改按钮的状态。
jQuery 对象的 attr 方法用于设置或获取元素的特定属性的值。如果仅将其与单个参数一起使用，则它将用于获取属性的值。另一方面，如果将它与两个参数一起使用，则它用于设置属性的值。在我们的例子中，我们使用它来设置按钮的 disabled 属性的值。除此之外，一切都是一样的。
如果您使用的是 jQuery 1.5+，则需要使用 prop 方法而不是 attr 方法，如以下代码片段所示。
//...
$('#submitButton').prop('disabled', true);
或者，如果要删除元素的任何属性，也可以使用 jQuery 对象的 removeAttr 方法，如以下代码片段所示。其结果与将 disabled 属性设置为 false
onchange pada medan input nama pengguna dan kata laluan. Oleh itu, apabila pengguna menukar nilai medan ini, acara onchange dicetuskan, yang akhirnya memanggil fungsi toggleButton. Dalam fungsi toggleButton, kami menyemak sama ada pengguna memasukkan nilai dalam dua medan yang diperlukan. Jika ini berlaku, kami menetapkan atribut disabled butang serah kepada false, yang akhirnya membolehkan butang serah supaya pengguna boleh mengkliknya. Sebaliknya, jika medan nama pengguna atau kata laluan kosong, kami menetapkan atribut disabled kepada true, yang akan melumpuhkan butang serah supaya pengguna tidak boleh mengkliknya. Dalam contoh di atas, kami menggunakan butang hantar input, tetapi anda juga boleh menggunakan butang HTML seperti yang ditunjukkan dalam contoh di bawah.
//...
$('#submitButton').removeAttr('disabled');
Ini adalah cara untuk mendayakan atau melumpuhkan butang menggunakan JavaScript biasa. Dalam bahagian seterusnya, kita akan melihat cara menggunakan perpustakaan jQuery. Dayakan atau lumpuhkan butang menggunakan jQuery🎜 🎜Dalam bahagian ini, kita akan membincangkan cara menogol keadaan butang dengan bantuan perpustakaan jQuery. 🎜 🎜Mari ubah suai contoh yang dibincangkan dalam bahagian sebelumnya. 🎜 rrreee 🎜Pertama, kami telah memuatkan perpustakaan jQuery supaya kami boleh menggunakannya dalam fungsi kami. Satu-satunya perbezaan dalam contoh di atas ialah kami menggunakan kaedah
attr objek jQuery untuk menukar keadaan butang. 🎜
🎜Kaedah attr objek jQuery digunakan untuk menetapkan atau mendapatkan nilai atribut khusus sesuatu elemen. Jika anda menggunakannya dengan hanya satu parameter, ia akan digunakan untuk mendapatkan nilai harta. Sebaliknya, jika anda menggunakannya dengan dua parameter, ia digunakan untuk menetapkan nilai harta tersebut. Dalam kes kami, kami menggunakannya untuk menetapkan nilai atribut disabled butang. Selain itu, semuanya sama. 🎜
🎜Jika anda menggunakan jQuery 1.5+, anda perlu menggunakan kaedah prop dan bukannya kaedah attr, seperti yang ditunjukkan dalam coretan kod berikut. 🎜
rrreee
🎜Sebagai alternatif, jika anda ingin mengalih keluar sebarang atribut elemen, anda juga boleh menggunakan kaedah removeAttr objek jQuery, seperti yang ditunjukkan dalam coretan kod berikut. Hasilnya adalah sama seperti menetapkan atribut disabled kepada false. 🎜
rrreee
🎜Ini ialah cara berbeza anda boleh mendayakan atau melumpuhkan butang menggunakan jQuery. 🎜
🎜Kesimpulan🎜
🎜Hari ini kita membincangkan cara mendayakan atau melumpuhkan butang dalam JavaScript dengan beberapa contoh praktikal. Selain JavaScript biasa, kami juga membincangkan cara mencapainya dengan bantuan perpustakaan jQuery. 🎜Atas ialah kandungan terperinci Membandingkan kaedah JavaScript: Dayakan atau lumpuhkan butang menggunakan jQuery vs. Vanila. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!