تقييد اختيار حدد الخيار دون تعطيل الحقل

Question

لدي مجموعة متعددة حدد الحقل الذي لا تريد المستخدم أن يكون قادرا على تغيير قيمة.

واجهة المستخدم الأسباب ، أود أن تكون قادرة على القيام بذلك دون استخدام المعوقين="true" السمة.لقد حاولت استخدام onmousedown, onfocus, onclick ووضع كل إلى طمس أو return false ولكن مع أي نجاح.

يمكن القيام بذلك أو أنا أحاول أن أفعل المستحيل ؟

Answer 1

أعرف أنك ذكرت أنك لا تريد ، ولكن في الواقع أنا أعتقد أن استخدام disabled السمة هي حل أفضل:

<select multiple="multiple">
    <option value="volvo" selected="true" disabled="disabled">Volvo</option>
    <option value="saab" disabled="disabled">Saab</option>
    <option value="opel" disabled="disabled">Opel</option>
    <option value="audi" disabled="disabled">Audi</option>
</select>

إذا كنت يمكن أن تعطي دائما select a class و الاسلوب مع CSS.هذا الحل سوف يعمل في جميع المتصفحات بغض النظر عن قدرات البرمجة.

Answer 2

هل يمكن أن تفعل ذلك مع onchange الحدث ؟

<select onfocus="this.oldIndex=this.selectedIndex" onchange="this.selectedIndex=this.oldIndex">

Answer 3

سيكون أفضل رهان لمبادلة خارج الخيارات ضمن حدد مربع.إذا كان لديك فقط إجابة واحدة في هذا الصندوق ، فإنه لا يهم إذا كانت قابلة للنقر.

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

1. "انظروا ، حدد مربع من الخيارات."
2. انقر
3. "إدارة الموارد البشرية ، لماذا لم ينجح هذا؟"
4. انقر
5. انقر!
6. "هذا الشيء الغبي مكسورة ، أنا لن أعود إلى هنا."

إذا كنت مبادلة خارج حدد النص HTML ، فإنه يحقق نفس الهدف.هذه هي مهمة بسيطة إلى حد ما بالنسبة لمعظم الأطر جافا سكريبت.

Answer 4

@جاك & @17 26, نقطة جيدة ولكن المستخدم النهائي سوف يكون أتوقع حدد مربع إلى تعطيل بحيث الارتباك لا ينبغي أن يكون مشكلة.

كان علي أن أكون أكثر وضوحا حول لماذا لم أستطع تعطيل التحكم.

التطبيق الذي سوف تستخدم هذا سوف تحتاج إلى تعطيل مجموعة من الخيارات و هناك شرط أن "مؤمن" السيطرة لا تزال تحافظ على نظرة ويشعر من الطبيعي عناصر تحكم النموذج.

Answer 5

جرب هذا الزناد.

<select multiple onchange="this.selectedIndex=this.selectedIndex">
<option>1</option>
<option>2</option>
</select>

Answer 6

هناك الأخيرة إضافة جديدة CSS3 التي 95 ٪ متوافق مع جميع المتصفحات الحالية ما عدا أوبرا ميني ، ودعا pointer-events.ببساطة, يمكنك "تعطيل" الإجراء الافتراضي على SELECT أو أي عنصر آخر ، تكون لا تزال قادرة على أداء أحداث معينة على ذلك...

يمكنك عرض كريس Coyier عليها في المادة أدخل رابط الوصف هنا.

هذا أقرب إلى ما تبحث عنه...آسف لم أستطع تقديم أي من بلدي الترميز الأمثلة...