CSS/:disabled

الصنف الزائف ‎:disabled في CSS (أي pseudo-class) يُمثِّل أي عنصر مُعطَّل، ولا يمكن اختيار أو النقر على العنصر المعطَّل ولا الكتابة فيه، ولا يقبل التركيز (focus)، ويمكن أن يكون العنصر مُفعَّلًا (enabled) أي يمكن اختياره أو النقر عليه أو الكتابة فيه.

input:disabled {
  background: #ccc;
}

الشكل العام لهذا المحدد:

:disabled

أمثلة

هذا المثال يستعرض نموذجًا بسيطًا لشحن المشتريات، ويستخدم الحدث change في JavaScript للسماح للمستخدم بتفعيل أو تعطيل بعض حقول النموذج:

<form action="#">
  <fieldset id="shipping">
    <legend>عنوان الشحن</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>عنوان وصول الفواتير</legend>
    <label for="billing_is_shipping">نفس عنوان الشحن:</label>
    <input type="checkbox" id="billing-checkbox" checked>
    <br>
    <input type="text" placeholder="Name" disabled>
    <input type="text" placeholder="Address" disabled>
    <input type="text" placeholder="Zip Code" disabled>
  </fieldset>
</form>

شيفرة CSS:

input[type="text"]:disabled {
  background: #ccc;
}

شيفرة JavaScript:

// الانتظار حتى انتهاء تحميل الصفحة
document.addEventListener('DOMContentLoaded', function () {
  // الاستماع إلى الحدث change
  document.getElementById('billing-checkbox').onchange = toggleBilling;
}, false);

function toggleBilling() {
  // تحديد الحقول
  var billingItems = document.querySelectorAll('#billing input[type="text"]');

  // تفعيل أو تعطيل الحقول
  for (var i = 0; i < billingItems.length; i++) {
    billingItems[i].disabled = !billingItems[i].disabled;
  }
}

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	9.0	9.0	3.1

انظر أيضًا

• صفحة الصنف الزائف enabled: الذي يُمثِّل أي عنصر مُفعّل.
• صفحة الصنف الزائف checked: الذي يُمثِّل أيّة أزرار انتقاء (radio button) أو صناديق تأشير (checkbox) أو خيارات <option> في عنصر <select> تم تحديدها أو انتقاؤها.
• صفحة الصنف الزائف default: الذي يُمثِّل أي عنصر مُختار افتراضيًا بين مجموعة من العناصر المتعلقة به.

مصادر ومواصفات

• معيار HTML Living Standard.
• مواصفة HTML5.
• مسودة Selectors Level 4.
• مواصفة CSS Basic User Interface Module Level 3.
• مواصفة Selectors Level 3.