تعطيل حقل الإدخال باستخدام جافا سكريبت

لتعطيل إدخال النص عندما يتم تحديد زر الاختيار (راديو)، يمكنك استخدام جافا سكريبت للتحقق مما إذا كان الزر محددًا أم لا، وبناءً على ذلك، تمكين أو تعطيل حقل الإدخال. هذا يتطلب التفاعل مع حدث تغيير حالة الراديو. فيما يلي كيفية القيام بذلك بطريقة مبسطة باستخدام جافا سكريبت:

javascriptCopy code
// تعيين متغير لحقل الإدخال
var otherPositionInput = document.getElementById('otherPosition');

// الاستماع إلى حدث تغيير حالة الراديو
document.querySelectorAll('input[name="position"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        // التحقق مما إذا كان الراديو "Others" محددًا
        if (this.value === 'Other') {
            // تمكين حقل الإدخال إذا تم تحديد الراديو "Others"
            otherPositionInput.disabled = false;
        } else {
            // تعطيل حقل الإدخال إذا تم تحديد أي راديو آخر
            otherPositionInput.disabled = true;
        }
    });
});

هذا الكود يقوم بتفعيل أو تعطيل حقل الإدخال (otherPositionInput) استنادًا إلى قيمة الراديو المحددة. إذا تم تحديد الراديو “Other”، يتم تفعيل حقل الإدخال لتمكين المستخدم من إدخال النص. في حال تحديد أي راديو آخر، يتم تعطيل حقل الإدخال لمنع المستخدم من إدخال النص.

يرجى ملاحظة أنك ستحتاج إلى ضبط القيمة المطلوبة لكل راديو والتحقق منها في الشيفرة، حسب الحالة الفعلية لتطبيقك.

بالطبع، دعنا نواصل تحسين وتوسيع المقال لنقدم شرحًا أكثر تفصيلاً وشمولًا حول كيفية تعطيل حقل الإدخال عند تحديد الراديو “Others”.

في هذا السياق، يتطلب تعطيل حقل الإدخال عندما يتم تحديد الراديو “Others” فحص حالة الراديو المرتبطة بالراديو الآخر. وسنقوم بذلك باستخدام الشيفرة التالية:

javascriptCopy code
// تعيين متغير لحقل الإدخال
var otherPositionInput = document.getElementById('otherPosition');

// الاستماع إلى حدث تغيير حالة الراديو
document.querySelectorAll('input[name="position"]').forEach(function(radio) {
    radio.addEventListener('change', function() {
        // التحقق مما إذا كان الراديو "Others" محددًا
        if (this.value === 'Other') {
            // تمكين حقل الإدخال إذا تم تحديد الراديو "Others"
            otherPositionInput.disabled = false;
        } else {
            // تعطيل حقل الإدخال إذا تم تحديد أي راديو آخر
            otherPositionInput.disabled = true;
        }
    });
});

// تحقق من حالة الراديو عند تحميل الصفحة لتعيين الحالة الصحيحة لحقل الإدخال
window.addEventListener('load', function() {
    // الحصول على الراديو المحدد بالافتراض
    var checkedRadio = document.querySelector('input[name="position"]:checked');
    
    // التحقق مما إذا كان الراديو "Others" محددًا عند تحميل الصفحة
    if (checkedRadio && checkedRadio.value === 'Other') {
        // تمكين حقل الإدخال إذا كان الراديو "Others" محددًا عند تحميل الصفحة
        otherPositionInput.disabled = false;
    } else {
        // تعطيل حقل الإدخال إذا لم يكن الراديو "Others" محددًا عند تحميل الصفحة
        otherPositionInput.disabled = true;
    }
});

هذا الكود يضيف دالة تحقق من حالة الراديو عند تحميل الصفحة لضمان تعيين الحالة الصحيحة لحقل الإدخال (otherPositionInput) استنادًا إلى الحالة الموجودة للراديو عند بدء تشغيل الصفحة. إذا كان الراديو “Others” محددًا عند تحميل الصفحة، يتم تفعيل حقل الإدخال لتمكين المستخدم من إدخال النص، وإلا فإنه يتم تعطيله.

يتيح هذا الشرح توضيح الخطوات المفصلة لتنفيذ هذه المهمة في جافا سكريبت، مما يساعد المطورين على فهم الكود بشكل أفضل وتطبيقه بنجاح في مشاريعهم.