วิธีปิดการใช้งานปุ่มโดยใช้ jQuery

มีเหตุผลหลายประการที่จะปิดการใช้งานปุ่มในเว็บแอปพลิเคชัน ไม่ว่าจะเป็นการป้องกันไม่ให้ผู้ใช้เพิ่มสินค้าที่จำหน่ายหมดแล้วลงในรถเข็นช็อปปิ้ง หรือไม่อนุญาตให้ผู้ใช้คลิกปุ่มหลังจากดำเนินการแล้ว jQuery ไม่มีวิธีการปิดการใช้งานปุ่มโดยตรง

เราใช้ prop() . แทน เมธอด ซึ่งเป็นส่วนเสริมที่ใหม่กว่าในไลบรารี — ปรากฏใน jQuery 1.6 ถูกนำมาใช้เป็นวิธีการแก้ปัญหาในการดึงค่าคุณสมบัติขององค์ประกอบที่เลือก ก่อนหน้านี้ใช้ attr() วิธีการซึ่งดึงค่าแอตทริบิวต์

การมีวิธีการที่เกี่ยวข้องกับการรับค่าแอททริบิวต์ในขณะที่การดึงค่าคุณสมบัติยังทำให้ได้ผลลัพธ์ที่คาดเดาไม่ได้ในบางครั้ง ตั้งแต่ jQuery 1.6 prop() วิธีการถูกนำมาใช้เพื่อแก้ปัญหาความไม่เท่าเทียมกันนี้ เพื่อจุดประสงค์ของเรา เราจะใช้ prop() เพื่อปิดการใช้งานปุ่มของเราเพราะ "ปิดการใช้งาน" เป็นค่าคุณสมบัติขององค์ประกอบปุ่ม HTML

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการใช้ att() เทียบกับ prop() , อ่านประวัติย่อและบทช่วยสอน

prop() ไวยากรณ์ jQuery

ตอนนี้เราได้พูดถึงสาเหตุและวิธีใช้ prop() . แล้ว เราสามารถดูไวยากรณ์ได้ จำไว้ว่า prop() เป็นเพียงวิธี jQuery อื่นและวิธีการเหล่านี้ถูกเรียกในองค์ประกอบที่เลือก - ในกรณีของเราคือปุ่ม มาดูกันว่าเราจะปิดการใช้งานปุ่มที่มีรหัส “btn” ได้อย่างไร

<button id='btn' type='submit'>
Button is Disabled
</button>

HTML นี้แสดงผลปุ่ม

ปุ่มของเรากำลังแสดงผล! ตอนนี้ เราสามารถตั้งค่าคุณสมบัติของ “disabled” เป็น true โดยใช้ jQuery prop() .

$('#btn').prop('disabled', true)

อย่างที่เราเห็น prop() ยอมรับค่าเป็นสตริงและเราตั้งค่าบูลีนในอาร์กิวเมนต์ที่สอง ค่าบูลีนเป็นจริงหรือเท็จ นี่คือคำแนะนำที่เจาะลึกถึงวิธีการใช้บูลีน

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

หลังจากตั้งค่าคุณสมบัติ "ปิดการใช้งาน" เป็นจริง เราจะสร้างปุ่มที่ไม่สามารถคลิกได้ ตอนนี้เราเข้าใจไวยากรณ์แล้ว มาดูเหตุผลและเวลาที่เราต้องการใช้สิ่งนี้กัน ในส่วนถัดไป เราจะมาดูไซต์อีคอมเมิร์ซที่มีผลิตภัณฑ์ที่มีแอตทริบิวต์ "ขายหมดแล้ว"

การใช้ jQuery prop() เพื่อปิดการใช้งานปุ่ม

ในตัวอย่างนี้ เรามีแอปซื้อของที่จะปิดการใช้งานปุ่ม "เพิ่มลงในรถเข็น" หากสินค้าหมด สำหรับตัวอย่างนี้ เราจะแสดงปุ่ม HTML อย่างง่าย และ

เพื่อเพิ่มสินค้าหากสินค้ายังไม่หมด

<button class='add' type='submit'>
Add to Cart
</button>

<div>

</div>

มาดูกันว่าปุ่มของเราแสดงผลอย่างไร

ตอนนี้ มาสร้างผลิตภัณฑ์และฟังก์ชันเรียกกลับ ซึ่งเป็นฟังก์ชันที่ส่งต่อไปยังฟังก์ชันอื่นที่จะเรียกในภายหลัง เพื่อแสดงรถเข็นของเราใน

ด้านบน หากสินค้าหมด ปุ่มจะปิดการทำงาน

const product = {
name: 'Jacket',
price: 50.00,
soldOut: false
}


$(document).ready(function() {
 $('button.add').click(function(event) {
   event.preventDefault()
   alert(JSON.stringify(product.soldOut))
   if (product.soldOut) {
   $('.add').prop('disabled', true)
   } else {
   $('div').append(product.name)
   }
 })
})

เราได้สร้างตัวแปรที่เรียกว่าผลิตภัณฑ์ที่มีวัตถุ ออบเจ็กต์มีคุณสมบัติของชื่อ ราคา และขายหมด หากทรัพย์สินที่ soldOut เป็นเท็จ เราควรเห็นแจ็คเก็ตของเราแสดงใน

คลิก Add to Cart แล้วดูว่าเกิดอะไรขึ้น

เนื่องจากคุณสมบัติ soldOut ของเราถูกตั้งค่าเป็นเท็จ เราจึงแสดงผลิตภัณฑ์ของเราใน

ถ้านั่นเป็นแจ็คเก็ตตัวสุดท้ายในสต็อกล่ะ? มาดูกันว่าจะเกิดอะไรขึ้นเมื่อตั้งค่าคุณสมบัติ soldOut เป็นจริง

const product = {
name: 'Jacket',
price: 50.00,
soldOut: true
}

เราคาดว่าปุ่ม Add to Cart จะถูกปิดใช้งานในขณะนี้

นั่นคือสิ่งที่เราต้องการ การใช้คำสั่งแบบมีเงื่อนไขในฟังก์ชันเรียกกลับ เราสามารถปิดใช้งานปุ่ม "หยิบใส่ตะกร้า" ได้ ขณะนี้ผู้ใช้ไม่สามารถเพิ่มสินค้าที่สินค้าหมดลงในรถเข็นได้ เราหลีกเลี่ยงความปวดหัวครั้งใหญ่ในแอปอีคอมเมิร์ซของเรา!

บทสรุป

ในการเรียนรู้วิธีปิดการใช้งานปุ่ม HTML ด้วย jQuery เราพบว่า jQuery ไม่มีวิธีการที่ชัดเจนในการทำเช่นนั้น เพื่อแก้ปัญหานี้ เราใช้ prop() วิธีการตั้งค่าคุณสมบัติปุ่ม "ปิดใช้งาน" เป็นจริง จากนั้นเราก็เห็นตัวอย่างการปิดใช้งานปุ่มมีประโยชน์อย่างไร

การแนะนำประสบการณ์ผู้ใช้ในการพัฒนาเว็บเป็นสิ่งสำคัญ ในคู่มือนี้ เราใช้ปุ่มปิดการใช้งานเพื่อแนะนำประสบการณ์ผู้ใช้ สำรวจว่าการปิดใช้งานปุ่มสามารถช่วยชี้นำประสบการณ์ผู้ใช้ของคุณในโครงการต่อไปได้อย่างไร