आईई 7 या 8

Question

का उपयोग करते समय छुपाए गए चेकबॉक्स की जांच न करने वाले लेबल पर क्लिक करना मैं चेकबॉक्स तत्व से जुड़े लेबल का उपयोग करके एक कस्टम डिज़ाइन किया गया चेकबॉक्स बनाने और चेकबॉक्स को छिपाने (प्रदर्शन: कोई नहीं) बनाने का प्रयास कर रहा हूं।

यह आईई को छोड़कर सभी ब्राउज़रों में ठीक काम करता है, जिसके लिए लेबल को क्लिक करने योग्य होने के लिए चेकबॉक्स दिखाना आवश्यक है।

यहाँ मेरी कोड ...

एचटीएमएल है

<input type="checkbox" id="myCheck" />​ 

सीएसएस

label.checkbox { 
    border:1px solid #666; 
    width:25px; 
    height:23px; 
    display:block; 
}​ 

jQuery

$("input[type=checkbox]").each(function() { 
    $(this).hide().before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>'); 
}); 

$("input[type=checkbox]").live('change', function() { 
    if ($(this).prop('checked') == true) { 
     $('label[for=' + $(this).attr("id") + ']').html("X") 
    } else { 
     $('label[for=' + $(this).attr("id") + ']').html("") 
    } 
});​ 

या jsfiddle

012,

Answer 1

मैं यह करने के लिए एक और अधिक efective तरीका है कि क्या वहाँ पता नहीं है, लेकिन आप पेज से बाहर चेकबॉक्स तत्व स्थिति की स्थापना करके ऐसा कर सकते हैं,

.hiddenEl { 
    position:absolute; 
    top: -3000px; 
} 


$("input[type=checkbox]").each(function() { 
    $(this).addClass("hiddenEl").before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>'); 
}); 

DEMO

---

अद्यतन

और आप भी checbox अस्पष्टता शून्य पर सेट कर सकते हैं, जो इसे "dispayl: none",

के बिना छुपाएगा

$(this).css("opacity", 0) 

या

$(this).fadeTo(0, 0) 

Answer 2

इस प्रयास करें:

#myCheck{ 
    position:absolute; 
    left:-9999px; 
    } 

और चेक बॉक्स "दृश्यमान"