indeterminate یک pseudo-class می باشد که برای انتخاب و استایل دهی به عناصری مثل checkbox, radio, progress که در وضعیت نامعلوم قرار دارند, استفاده می شود.
مثلا checkbox و radio می توانند در وضعیت تیک خورده (checked) یا تیک نخورده (unchecked) باشند اما گاهی در هیچکدام از این دو وضعیت نیستند به این وضعیت, وضعیت نامعلوم یا indeterminate گفته می شود.
همینطور زمانی که برای نوار پیشرفت (progress) درصد پیشرفت نامعلوم باشد این عنصر در وضعیت indeterminate قرار خواهد داشت.
این وضعیت برای یک عنصر فقط می تواند توسط جاوااسکریپت تنظیم شود:
document.getElementsByTagName("input")[0].indeterminate = true;
یک مثال کاربردی برای این حالت چکباکس های تودرتو هستند. فرض کنید یک چکباکس مادر داریم که زمانی که همه فرزندانش حالت تیک خورده باشند آن چکباکس هم تیک خورده (checked) می شود و هرگاه تمام چکباکس های فرزند تیک نخورده باشند, آن چکباکس هم تیک نخورده (unchecked) خواهد بود. و اگر تعدادی از فرزندان تیک خورده و تعدادی تیک نخورده باشند وضعیت چکباکس مادر نامعلوم (indeterminate) خواهد شد.
با استفاده از تکه کد زیر می توان برچسب چکباکسی که در وضعیت نامعلوم قرار دارد را استایل دهی کرد:
input[type="checkbox"]:indeterminate + label {
color: grey;
}
بررسی دموی زیر موضوع را روشن خواهد کرد:
See the Pen :indeterminate by Mojtaba Seyedi (@seyedi) on CodePen.
پشتیبانی مرورگرها
indeterminate: برای عنصر checkbox در مرورگرهای کروم, فایرفاکس, اپرا +10.60 و اینترنت اکسپلورر +9 پشتیبانی می شود. و برای عنصر progress در مرورگرهای کروم, فایرفاکس, اپرا و اینترنت اکسپلورر +10 پشتیبانی می شود.
سوال داری؟ برو به پنل پرسش و پاسخ