บทความนี้อธิบายถึงวัตถุประสงค์ การทำงาน และการใช้งานคุณสมบัติ “ปิดใช้งาน” กล่องกาเครื่องหมายอินพุต HTML DOM ใน JavaScript
กล่องกาเครื่องหมายอินพุต HTML DOM คุณสมบัติ 'ปิดใช้งาน' ทำงานใน JavaScript อย่างไร
ช่องทำเครื่องหมายอินพุต “ พิการ ” คุณสมบัติขึ้นอยู่กับแอตทริบิวต์ “ช่องทำเครื่องหมาย” ทำงานบนฟอร์ม HTML และช่องป้อนข้อมูลเพื่อปิดและยกเลิกการปิดช่องทำเครื่องหมายที่กำหนด
ไวยากรณ์ (ตั้งค่าคุณสมบัติที่ปิดใช้งาน)
ช่องทำเครื่องหมายวัตถุ พิการ = จริง | เท็จตามไวยากรณ์การส่งคืนที่กำหนดไว้ คุณสมบัติ 'ปิดใช้งาน' รองรับพารามิเตอร์สองตัวที่แสดงรายการดังต่อไปนี้:
- จริง: แสดงว่าช่องทำเครื่องหมายที่เกี่ยวข้องถูกปิดใช้งาน
- เท็จ (ค่าเริ่มต้น): เป็นค่าที่ไม่บังคับซึ่งระบุว่าช่องทำเครื่องหมายที่เกี่ยวข้องไม่ได้ถูกปิดใช้งาน
ส่งคืน (ส่งคืนทรัพย์สินที่ปิดใช้งาน)
ช่องทำเครื่องหมายวัตถุ พิการในไวยากรณ์ข้างต้น ' ช่องทำเครื่องหมายวัตถุ ” สอดคล้องกับ HTML “ ช่องทำเครื่องหมาย ' องค์ประกอบ.
ลองใช้ไวยากรณ์ที่กำหนดไว้ข้างต้นในตัวอย่างด้านล่างเพื่อทำความเข้าใจการใช้งานจริงของคุณสมบัติ 'ปิดใช้งาน'
ตัวอย่างที่ 1: การใช้ช่องทำเครื่องหมายอินพุต 'ปิดใช้งาน' คุณสมบัติ การใช้ไวยากรณ์พื้นฐาน
ในตัวอย่างแรก มีการเพิ่ม 'ช่องทำเครื่องหมาย' เพื่อปิดใช้งานโดยใช้ไวยากรณ์ทั่วไปที่กำหนดไว้
รหัส HTML
ขั้นแรก วิเคราะห์รหัส HTML ที่กำหนด:
< ลักษณะร่างกาย = 'จัดข้อความ: กึ่งกลาง' >
< ชั่วโมง2 > HTML อินพุต DOM ช่องทำเครื่องหมาย ปิดใช้งานคุณสมบัติใน JavaScript ชั่วโมง2 >
ช่องทำเครื่องหมาย : < ประเภทอินพุต = 'ช่องทำเครื่องหมาย' รหัส = 'การสาธิต' > ส่งแบบฟอร์มแล้ว < br >< br >
< หน้า > ช่องทำเครื่องหมายที่กำหนดถูกปิดใช้งาน หน้า >
ในบรรทัดรหัสด้านบน:
- “ <เนื้อหา> แท็ก ” ระบุส่วนเนื้อหาที่จัดชิดกับ “ ศูนย์ ” ด้วยความช่วยเหลือของ “ สไตล์ ' คุณลักษณะ.
- “ ” แท็กกำหนดหัวข้อย่อยของระดับ 2
- “ <อินพุต> ” แท็กสร้าง “ช่องทำเครื่องหมาย” โดยระบุประเภทอินพุต “ ช่องทำเครื่องหมาย ” มี id ที่กำหนด “ การสาธิต '.
- “ ” แท็กเพิ่มองค์ประกอบย่อหน้าเพื่อแสดงผลลัพธ์ที่เป็นผลลัพธ์
รหัสจาวาสคริปต์
ต่อไป ดูที่โค้ด JavaScript:
< สคริปต์ >เอกสาร. getElementById ( 'การสาธิต' ) . พิการ = จริง ;
สคริปต์ >
ในข้อมูลโค้ดข้างต้น ' document.getElementById() ” ใช้วิธีดึงช่องทำเครื่องหมายโดยใช้ id “demo” และค่าของคุณสมบัติ “disabled” ถูกตั้งค่าเป็น “ จริง ” ซึ่งปิดใช้งานช่องทำเครื่องหมาย
เอาต์พุต
เอาต์พุตด้านบนยืนยันว่าช่องทำเครื่องหมายที่ระบุถูกปิดใช้งานเนื่องจาก ' พิการ ” ตั้งค่าคุณสมบัติเป็น “ จริง '.
ตัวอย่างที่ 2: ส่งคืนค่าคุณสมบัติช่องทำเครื่องหมาย 'ปิดใช้งาน' อินพุต
ตัวอย่างนี้ใช้คุณสมบัติ 'ปิดใช้งาน' เพื่อส่งคืนสถานะของช่องทำเครื่องหมายเป้าหมายเป็นค่าบูลีน (จริง/เท็จ)
รหัส HTML
พิจารณารหัส HTML ต่อไปนี้:
< ลักษณะร่างกาย = 'จัดข้อความ: กึ่งกลาง' >< ชั่วโมง2 > HTML อินพุต DOM ช่องทำเครื่องหมาย ปิดใช้งานคุณสมบัติใน JavaScript ชั่วโมง2 >
ช่องทำเครื่องหมาย : < ประเภทอินพุต = 'ช่องทำเครื่องหมาย' พิการ = จริง รหัส = 'การสาธิต' > ส่งแบบฟอร์มแล้ว < br >< br >
< รหัสพี = 'ตัวอย่าง' > หน้า >
ในบล็อกรหัสด้านบน:
- กล่องกาเครื่องหมายถูกกำหนดและสถานะของ “ พิการ ” คุณสมบัติถูกตั้งค่าเป็น “ จริง '.
- หลังจากนั้น ช่องว่าง “ ” องค์ประกอบถูกเพิ่มด้วย id ที่กำหนด “sample” เพื่อต่อท้ายเอาต์พุต
รหัสจาวาสคริปต์
ตอนนี้ ไปที่รหัส JavaScript:
< สคริปต์ >มี = เอกสาร. getElementById ( 'การสาธิต' ) . พิการ ;
เอกสาร. getElementById ( 'ตัวอย่าง' ) . HTML ภายใน = ก ;
สคริปต์ >
ในรหัสด้านบน:
- ตัวแปร “ ก ” ใช้ “ document.getElementById() ” วิธีการเข้าถึงช่องทำเครื่องหมายโดยใช้รหัส 'สาธิต' และเชื่อมโยง ' พิการ คุณสมบัติ ” เพื่อตรวจสอบว่ากล่องกาเครื่องหมายที่ดึงมาถูกปิดใช้งานหรือไม่
- เมธอด “document.getElementById()” ที่นำไปใช้อีกครั้งจะดึงย่อหน้าว่างที่รวมไว้และแสดงสถานะของคุณสมบัติ “ปิดใช้งาน” เป็นย่อหน้า
เอาต์พุต
ตามที่วิเคราะห์ ผลลัพธ์จะแสดงสถานะการจัดสรร 'ช่องทำเครื่องหมาย' เช่น ' จริง '.
ตัวอย่างที่ 3: ปิดใช้งานและยกเลิกการปิดใช้งานช่องทำเครื่องหมายโดยใช้ช่องทำเครื่องหมายอินพุต 'ปิดใช้งาน' คุณสมบัติ
นอกเหนือจากการตั้งค่าและส่งคืนสถานะช่องทำเครื่องหมายแล้ว คุณสมบัติ 'ปิดใช้งาน' ยังอนุญาตให้ผู้ใช้ปิดใช้งานและยกเลิกการปิดใช้งานช่องทำเครื่องหมายในเวลาเดียวกัน มาดูกันในทางปฏิบัติ
รหัส HTML
มาทบทวนโค้ด HTML ที่เขียน:
< ลักษณะร่างกาย = 'จัดข้อความ: กึ่งกลาง' >< ชั่วโมง2 > HTML อินพุต DOM ช่องทำเครื่องหมาย ปิดใช้งานคุณสมบัติใน JavaScript ชั่วโมง2 >
ช่องทำเครื่องหมาย : < ประเภทอินพุต = 'ช่องทำเครื่องหมาย' รหัส = 'การสาธิต' > ส่งแบบฟอร์มแล้ว ป้อนข้อมูล >< br >< br >
< ปุ่มบนคลิก = 'ตรวจสอบปิดการใช้งาน ()' > ปิดการใช้งานช่องทำเครื่องหมาย ปุ่ม >
< ปุ่มบนคลิก = 'checkUndisable()' > ปิดการใช้งานช่องทำเครื่องหมาย ปุ่ม >
ในบล็อกรหัสด้านบน:
- ในทำนองเดียวกัน ให้รวมช่องทำเครื่องหมายและเพิ่มปุ่มที่มี “ เมื่อคลิก ” เหตุการณ์ที่ดำเนินการ “ ตรวจสอบปิดการใช้งาน () ” ฟังก์ชั่นเมื่อคลิกปุ่ม
- หลังจากนั้นปุ่มที่สองจะถูกเพิ่มซึ่งใช้ตัวจัดการเหตุการณ์ 'onclick' สำหรับการดำเนินการของ ' ตรวจสอบปิดการใช้งาน () ” ฟังก์ชันเมื่อคลิกปุ่ม
รหัสจาวาสคริปต์
ถัดไป ผ่านรหัสที่ระบุไว้ด้านล่าง:
< สคริปต์ >ตรวจสอบฟังก์ชั่นปิดการใช้งาน ( ) {
เอกสาร. getElementById ( 'การสาธิต' ) . พิการ = จริง ;
}
ตรวจสอบฟังก์ชั่นปิดการใช้งาน ( ) {
เอกสาร. getElementById ( 'การสาธิต' ) . พิการ = เท็จ ;
}
สคริปต์ >
ในบรรทัดรหัสด้านบน:
- กำหนดฟังก์ชันชื่อ “ ตรวจสอบปิดการใช้งาน () ” ที่ใช้ “ document.getElementById() ” วิธีการเข้าใกล้ช่องทำเครื่องหมายผ่านรหัส 'สาธิต' และตั้งค่าเป็น 'จริง'
- ฟังก์ชันที่สอง “ ตรวจสอบปิดการใช้งาน () ฟังก์ชัน ” ใช้เมธอด “document.getElementById()” อีกครั้งเพื่อเข้าถึงช่องทำเครื่องหมายอีกครั้งและตั้งค่าเป็น “เท็จ” หากผู้ใช้คลิกที่ปุ่มที่สองที่มีชื่อ “เลิกปิดช่องทำเครื่องหมาย”
เอาต์พุต
ผลลัพธ์ 'ปิดใช้งาน' ช่องทำเครื่องหมายที่กำหนดเมื่อผู้ใช้คลิกที่ปุ่มแรกและ 'ยกเลิกการปิดใช้งาน' หากผู้ใช้คลิกที่ปุ่มที่สองตามนั้น
บทสรุป
ใน JavaScript ช่องทำเครื่องหมาย HTML DOM Input “ พิการ คุณสมบัติ ” ช่วยผู้ใช้ในการตั้งค่าและส่งคืนสถานะการตรวจสอบของ “ช่องทำเครื่องหมาย” กำหนดไวยากรณ์ทั่วไปสำหรับทั้งกระบวนการ 'set' และ 'return' ไวยากรณ์ชุดของมันทำงานกับค่าสองค่า “ จริง ' และ ' เท็จ '. ในทางกลับกัน ไวยากรณ์การส่งคืนไม่จำเป็นต้องใช้พารามิเตอร์ใดๆ บทความนี้แสดงวัตถุประสงค์ การทำงาน และการใช้งานจริงของคุณสมบัติ 'ปิดใช้งาน' กล่องกาเครื่องหมายอินพุต HTML DOM ใน JavaScript