كيفية تعطيل وتمكين الإدخال باستخدام jQuery: دليل كامل

كيفية تعطيل وتمكين الإدخال باستخدام jQuery؟ دليل للمبتدئين وغيرهم

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

سؤال "تعطيل/تمكين الإدخال باستخدام jQuery؟" هو أحد أكثر الأسئلة شيوعًا على Stack Overflow (آلاف المشاهدات وعشرات الإجابات). وهذا ليس من قبيل الصدفة: فالبساطة الظاهرة تخفي عدة مطبات يقع فيها المبتدئون. في هذا الدليل، لن نعرض الكود فقط - بل سنعلمك التفكير مثل نينجا jQuery. هيا بنا!

لماذا لا يجب استخدام .attr() مع disabled؟

إذا كنت قد بحثت عن حل بالفعل، فمن المحتمل أنك رأيت نصائح قديمة مثل $('input').attr('disabled', 'disabled');. كان هذا يعمل في عصر jQuery 1.x، لكنه اليوم طريق مسدود. لماذا؟

• .attr() يعمل مع سمات HTML، بينما .prop() يعمل مع خصائص كائن DOM.
• السمة disabled هي خاصية منطقية يجب أن تكون true أو false، وليس سلسلة نصية.
• عند استخدام .attr('disabled', false)، قد يقوم jQuery ببساطة بحذف السمة، لكنه لا يعيد تعيين الحالة بشكل صحيح دائمًا.

المعيار الحديث هو استخدام .prop(). احفظ هذا كـ "أبانا":

// تعطيل الإدخال$('#myInput').prop('disabled', true);

// تمكين الإدخال مرة أخرى$('#myInput').prop('disabled', false);

بسيط، أليس كذلك؟ لكن دعنا نتعمق أكثر.

أمثلة أساسية: تعطيل وتمكين إدخال واحد

لنفترض أن لدينا حقل إدخال بريد إلكتروني وزر تشغيل. نريد أنه عند الضغط على الزر، يتم قفل الحقل أو فتحه.

<input type="email" id="emailInput" placeholder="أدخل البريد الإلكتروني"><button id="toggleBtn">قفل الحقل</button>

<script>$(document).ready(function() {    $('#toggleBtn').on('click', function() {        var $input = $('#emailInput');        var isDisabled = $input.prop('disabled');                // تبديل الحالة        $input.prop('disabled', !isDisabled);                // تغيير نص الزر        $(this).text(isDisabled ? 'قفل الحقل' : 'فتح الحقل');    });});</script>

لاحظ: نستخدم $(document).ready() - وهذا يضمن تحميل DOM قبل تنفيذ السكريبت. بدون ذلك، قد لا يعثر الكود على العناصر.

العمل مع مجموعة من العناصر: select و checkbox و textarea

طريقة .prop() عالمية. إنها لا تعمل فقط مع <input>، بل أيضًا مع <select> و <textarea> و <button> وحتى مع مجموعات كاملة من العناصر.

قفل جميع عناصر النموذج مرة واحدة

تخيل أنك بحاجة لقفل النموذج بأكمله بعد الإرسال، حتى لا يغير المستخدم البيانات:

<form id="myForm">    <input type="text" name="name" placeholder="الاسم">    <input type="email" name="email" placeholder="البريد الإلكتروني">    <select name="country">        <option value="">اختر الدولة</option>        <option value="ru">روسيا</option>        <option value="us">الولايات المتحدة</option>    </select>    <button type="submit">إرسال</button></form>

<script>// قفل جميع input و select و textarea داخل النموذج$('#myForm').find('input, select, textarea, button').prop('disabled', true);</script>

يمكن أن يكون الأمر أكثر أناقة: استخدام :input - وهو منتقي زائف في jQuery يختار جميع العناصر