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

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

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