الصنف ‎:disabled

من موسوعة حسوب
< CSS
اذهب إلى: تصفح، ابحث

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

input:disabled {
  background: #ccc;
}
الشكل العام لهذا المحدد:
:disabled

أمثلة

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

<form action="#">
  <fieldset id="shipping">
    <legend>Shipping address</legend>
    <input type="text" placeholder="Name">
    <input type="text" placeholder="Address">
    <input type="text" placeholder="Zip Code">
  </fieldset>
  <br>
  <fieldset id="billing">
    <legend>Billing address</legend>
    <label for="billing_is_shipping">Same as shipping address:</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

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