अक्षम चेकबॉक्स के लिए सीएसएस कैसे सेट करें?

Question

मैं एक ग्रिड में अक्षम चेकबॉक्स के लिए सीएसएस को बदलना चाहता हूं (वे उपयोगकर्ताओं के लिए देखना मुश्किल है)। ऐसा करने का एक आसान तरीका क्या है?

प्रौद्योगिकियों का प्रयोग (घटते क्रम में) में मेरी प्राथमिकता:
सीएसएस
जावास्क्रिप्ट
jQuery
अन्य

Answer 1

मैं पृष्ठभूमि के रंग (background-color फॉर्म/फ़ील्डसेट) को बदलने का सुझाव दूंगा, और देखें कि आप बेहतर विपरीत के साथ आ सकते हैं या नहीं। तुम सिर्फ विकलांग (? गैर चयन) चेक बॉक्स का रंग बदलना चाहते हैं आप की कोशिश कर सकते हैं:

input[disabled] { 
... 
/* CSS here */ 
... 
} 

लेकिन अगर वे एक कारण के लिए विकलांग हो, निश्चित रूप से वे प्रमुखता से दिखाई दे सकता है की जरूरत नहीं है? सक्रिय/सक्षम और निष्क्रिय/अक्षम फॉर्म तत्वों के बीच भ्रम से बचने के लिए, निश्चित रूप से, ग्रेड-आउट होने का उद्देश्य निश्चित रूप से है?

Answer 2

Ive कुछ जे एस पुस्तकालयों के साथ अच्छी किस्मत काम करना था। माना जाता है कि बक्से मानक चेक बॉक्स से बहुत अलग दिखने के लिए मेरी आवश्यकता थी। निम्नलिखित पुस्तकालय भी 508 अनुपालन है।

Styled Form Controls

Answer 3

मूल रूप से, आप div, पी, या एक ग्रिड के लिए इस्तेमाल किसी अन्य तत्व पर ऑनक्लिक ईवेंट संलग्न करने के लिए और फिर छिपा हुआ एक ग्रिड में है कि क्षेत्र से जुड़े तत्व में जाँच की मूल्य हस्तांतरण की जरूरत है। जो बहुत छोटा है, यदि जावास्क्रिप्ट का उपयोग किया जाता है - किसी तत्व पर ऑनक्लिक ईवेंट जोड़ने के लिए jquery जांचें। यदि क्लिक किया गया है, तो छुपा तत्व के लिए मान = 1 सेट करें।

Answer 4

input:disabled {} प्रत्येक ब्राउजर के लिए काम करता है - आपने इसे अनुमान लगाया-आईई। आईई के लिए, मुझे लगता है कि आपको कुछ जेएस लाइब्रेरी का उपयोग करना होगा।

Answer 5

चेकबॉक्स सक्षम रखें, लेकिन फिर चेकबॉक्स में onfocus=this.blur() जोड़ें ताकि इसे क्लिक नहीं किया जा सके।

या अगर ASP.net का उपयोग कर (के रूप में आप अपनी टिप्पणी में कहते हैं) चेकबॉक्स सक्षम करने के लिए सेट रखने के लिए और Page.Load घटना के लिए निम्नलिखित जोड़ें: आप एक मिश्रण के साथ ऐसे स्वरूप में हैं

CheckBox1.Attributes.Add("onclick", "return false;"); 

Answer 6

सक्षम और अक्षम चेकबॉक्स के, अक्षम किए गए चेकबॉक्स को उपयोगकर्ता के लिए भ्रम से बचाता है। यदि इरादे चेकबॉक्स के साथ केवल एक दृश्य पृष्ठ प्रदर्शित करना है (उदा। खरीद रसीद पर चयनित उत्पाद विकल्प दिखाने के लिए) तो छवियों के साथ चेकबॉक्स इनपुट तत्वों को प्रतिस्थापित करने से बेहतर परिणाम मिल सकते हैं।

<img src="unchecked.gif"> 
<img src="checked.gif"> 

Answer 7

के साथ बदलें

<input type="checkbox" disabled> 
<input type="checkbox" disabled checked> 

वास्तव में एक सा CSS3 के साथ आप एक बहुत साधारण समाधान नकली कर सकते हैं। आपको हमेशा यह विचार करना होगा कि आप किस तरह का समर्थन देना चाहते हैं। लेकिन यदि आप आधुनिक ब्राउज़र पर काम कर रहे हैं, तो बस इसे जाने दें।

यहाँ एचटीएमएल

<label> 
    <input type="checkbox" name="test" /> 
    <span>I accept terms and cons</span><br><br> 
    <button>Great!</button> 
</label> 

है यहाँ सीएसएस

button { display: none} 
:checked ~ button { 
    font-style: italic; 
    color: green; 
    display: inherit; 
} 

है और यहाँ डेमो http://jsfiddle.net/DyjmM/