توضح هذه المقالة الغرض من خاصية خانة اختيار إدخال HTML DOM وعملها واستخدامها 'معطلة' في JavaScript.
كيف تعمل خاصية 'معطل' في خانة اختيار إدخال HTML DOM في JavaScript؟
مربع اختيار الإدخال ' عاجز 'تعتمد على سمة' مربع الاختيار '. إنه يعمل على نماذج HTML وحقول الإدخال لتعطيل وإلغاء تعطيل مربعات الاختيار المحددة.
بناء الجملة (تعيين الخاصية المعطلة)
مربع الاختيار عاجز = حقيقي | خطأ شنيعوفقًا لبناء جملة الإرجاع المحدد ، تدعم خاصية 'المعطل' معلمتين مدرجتين على النحو التالي:
- حقيقي: إنه يمثل أن مربع الاختيار المقابل معطل.
- خطأ (القيمة الافتراضية): إنها قيمة اختيارية تشير إلى أن مربع الاختيار المرتبط غير معطل.
إرجاع (إعادة الممتلكات المعطلة)
مربع الاختيار عاجزفي الصيغة أعلاه ، ' مربع الاختيار 'يتوافق مع HTML' خانة الاختيار ' عنصر.
دعنا نستخدم التركيبات المحددة أعلاه في الأمثلة أدناه لفهم التنفيذ العملي للخاصية 'المعطلة'.
مثال 1: تطبيق خاصية 'معطل' في خانة اختيار الإدخال استخدام النحو الأساسي
في المثال الأول ، تمت إضافة 'مربع الاختيار' لتعطيله باستخدام الصيغة العامة المحددة.
كود HTML
أولاً ، قم بتحليل كود HTML المحدد:
< نمط الجسم = 'محاذاة النص: الوسط' >
< h2 > لغة البرمجة إدخال DOM خانة اختيار خاصية معطلة في JavaScript h2 >
خانة اختيار : < نوع الإدخال = 'مربع الاختيار' بطاقة تعريف = 'عرض' > تم إرسال النموذج < ر > < ر >
< ص > تم تعطيل مربع الاختيار المحدد ص >
في سطور الكود أعلاه:
- ال ' <الجسم> 'تحدد قسم النص المحاذي لـ' مركز 'بمساعدة' أسلوب ' يصف.
- ال ' 'علامة العنوان الفرعي للمستوى 2.
- ال ' <إدخال> 'تنشئ علامة' مربع اختيار 'من خلال تحديد نوع الإدخال' خانة الاختيار 'لها معرف مخصص' تجريبي '.
- ال ' ”يضيف عنصر فقرة لعرض النتيجة الناتجة.
كود جافا سكريبت
بعد ذلك ، انظر إلى كود JavaScript:
< النصي >وثيقة. getElementById ( 'عرض' ) . عاجز = حقيقي ؛
النصي >
في مقتطف الشفرة أعلاه ، ' document.getElementById () 'يتم تطبيق طريقة' لجلب مربع الاختيار باستخدام المعرف 'demo' الخاص به ويتم تعيين قيمة الخاصية 'المعطلة' على ' حقيقي 'مما يؤدي إلى تعطيل مربع الاختيار.
انتاج |
يؤكد الإخراج أعلاه أنه تم تعطيل مربع الاختيار المحدد بسبب ' عاجز 'تم تعيين الخاصية على' حقيقي '.
مثال 2: إرجاع قيمة خاصية خانة اختيار الإدخال 'معطلة'
يطبق هذا المثال خاصية 'معطل' لإرجاع حالة مربع الاختيار المستهدف كقيمة منطقية (صواب / خطأ).
كود HTML
ضع في اعتبارك كود HTML التالي:
< نمط الجسم = 'محاذاة النص: الوسط' >< h2 > لغة البرمجة إدخال DOM خانة اختيار خاصية معطلة في JavaScript h2 >
خانة اختيار : < نوع الإدخال = 'مربع الاختيار' عاجز = حقيقي بطاقة تعريف = 'عرض' > تم إرسال النموذج < ر > < ر >
< ع معرف = 'عينة' > ص >
في كتلة التعليمات البرمجية أعلاه:
- يتم تعيين مربع الاختيار وحالة ' عاجز 'على' حقيقي '.
- بعد ذلك ، ' 'يضاف عنصر' معرّف معيّن 'عينة' لإلحاق المخرجات.
كود جافا سكريبت
الآن ، انتقل إلى كود JavaScript:
< النصي >هناك = وثيقة. getElementById ( 'عرض' ) . عاجز ؛
وثيقة. getElementById ( 'عينة' ) . داخلي HTML = أ ؛
النصي >
في الكود أعلاه:
- المتغير ' أ 'يستخدم' document.getElementById () 'للوصول إلى مربع الاختيار باستخدام المعرف' التجريبي 'وإقران' عاجز 'للتحقق مما إذا كان مربع الاختيار الذي تم جلبه معطلاً أم لا.
- طريقة 'document.getElementById ()' المطبقة مرة أخرى تجلب الفقرة الفارغة المضمنة وتعرض حالة الخاصية 'معطل' كفقرة.
انتاج |
كما تم تحليلها ، تُرجع النتيجة الحالة المخصصة 'لمربع الاختيار' ، أي ' حقيقي '.
مثال 3: تعطيل وإلغاء تعطيل خانة الاختيار باستخدام خاصية 'معطل' في خانة اختيار الإدخال
بصرف النظر عن تعيين حالة مربع الاختيار وإعادتها ، تتيح خاصية 'معطل' أيضًا للمستخدمين تعطيل وإلغاء تعطيل مربع الاختيار في نفس الوقت. دعونا نرى ذلك عمليا.
كود HTML
دعونا نراجع كود HTML المكتوب:
< نمط الجسم = 'محاذاة النص: الوسط' >< h2 > لغة البرمجة إدخال DOM خانة اختيار خاصية معطلة في JavaScript h2 >
خانة اختيار : < نوع الإدخال = 'مربع الاختيار' بطاقة تعريف = 'عرض' > تم إرسال النموذج مدخل > < ر > < ر >
< زر عند النقر = 'checkDisable ()' > قم بتعطيل مربع الاختيار زر >
< زر عند النقر = 'checkUndisable ()' > قم بتعطيل مربع الاختيار زر >
في كتلة التعليمات البرمجية أعلاه:
- وبالمثل ، قم بتضمين مربع اختيار وإضافة زر به ' عند النقر 'الحدث الذي ينفذ' check تعطيل () ”وظيفة عند النقر فوق الزر.
- بعد ذلك ، تتم إضافة الزر الثاني الذي يستخدم أيضًا معالج الحدث 'onclick' لتنفيذ ' checkUndisable () ”عند نقر الزر.
كود جافا سكريبت
بعد ذلك ، انتقل إلى الكود المذكور أدناه:
< النصي >فحص الوظيفة ( ) {
وثيقة. getElementById ( 'عرض' ) . عاجز = حقيقي ؛
}
تحقق من وظيفة غير قابل للتعطيل ( ) {
وثيقة. getElementById ( 'عرض' ) . عاجز = خطأ شنيع ؛
}
النصي >
في سطور الكود أعلاه:
- حدد وظيفة باسم ' check تعطيل () 'الذي يطبق' document.getElementById () 'للاقتراب من مربع الاختيار عبر معرفه' demo 'وتعيين قيمته على' true '.
- الوظيفة الثانية ' checkUndisable () تقوم الوظيفة مرة أخرى بتطبيق طريقة 'document.getElementById ()' للوصول إلى مربع الاختيار مرة أخرى وتعيين قيمته على 'false' إذا نقر المستخدم على الزر الثاني المضمن المسمى 'Undisable the checkbox'.
انتاج |
الناتج 'يعطل' مربع الاختيار المحدد عندما ينقر المستخدم على الزر الأول و 'يلغي تعطيله' إذا نقر المستخدم على الزر الثاني وفقًا لذلك.
خاتمة
في JavaScript ، مربع اختيار إدخال HTML DOM ' عاجز 'تساعد المستخدمين على تعيين وإرجاع الحالة المحددة لـ' مربع الاختيار '. وهي تحدد التركيب النحوي المعمم لكل من عمليات 'المجموعة' و 'العودة'. يعمل تركيبه على قيمتين ' حقيقي ' و ' خطأ شنيع '. من ناحية أخرى ، لا يتطلب بناء الجملة العائد أي معلمة. توضح هذه المقالة الهدف والعمل والتنفيذ العملي لخاصية 'معطلة' في HTML DOM Input Checkbox في JavaScript.