2010-06-18 12 views
15

मुझे आईई में छिपे हुए चेकबॉक्स की जांच करने में समस्या हो रही है। इस आधार एचटीएमएल है:इंटरनेट एक्सप्लोरर (और jquery) में लेबल और छिपे हुए फ़ील्ड

<input id="groups_ids_1" name="group_ids[]" type="checkbox" value="1" /> 
<label for="groups_ids_1">Display</label> 

यह ठीक काम करता है, लेकिन अगर मैं तो या तो

$('input[type=checkbox]').hide(); 

या

$('input[type=checkbox]').css('visibility', 'hidden'); 

लेबल अब क्लिक करने में चेकबॉक्स की जाँच करता है का उपयोग करते हुए चेकबॉक्स छिपाने अर्थात। बेशक यह फ़ायरफ़ॉक्स, क्रोम और सफारी में ठीक काम करता है।

उत्तर

12

आप आईई मुद्दों के आसपास पाने के लिए लेबल पर एक क्लिक पर क्लिक करने का प्रयास कर सकते हैं।

$('label').click(function() { 
    $('#' + $(this).attr('for')).click(); 
}); 

यदि यह काम नहीं करता है, तो मैन्युअल रूप से विशेषता सेट करने का प्रयास करें।

$('label').click(function() { 
    var checkbox = $('#' + $(this).attr('for')); 
    if (checkbox.is(':checked')) { 
    checkbox.removeAttr('checked'); 
    } else { 
    checkbox.attr('checked', 'checked'); 
    } 
}); 
+0

मैं किसी तरह से बचने के लिए के लिए उम्मीद की गई थी इस एक मैं अपने चेकबॉक्स फ़ील्ड के लिए .changed कॉलबैक का उपयोग कर रहा था, और यह थोड़ा हैकी महसूस किया।लेकिन कुछ प्रयोग करने के बाद यह एकमात्र कामकाज प्रतीत होता है। आपकी प्रतिक्रिया के लिए धन्यवाद :) –

+0

ध्यान दें कि यह अन्य ब्राउज़रों पर 2 बार चेकबॉक्स परिवर्तन को ट्रिगर कर सकता है –

3

इससे बचने का सबसे अच्छा तरीका है चेकबॉक्स को बिल्कुल शीर्ष पर रखना: -1000px;

13

छिपे हुए चेक बॉक्स 9. मेरी सामान्यीकृत समाधान नीचे आईई संस्करण में घटनाओं प्राप्त नहीं होता है इस प्रकार है:

/* hide checkboxes */ 
input[type=checkbox] { 
    visibility: hidden; 
    position: absolute; /* move out of document flow */ 
} 
/* ie8-: hidden inputs don't receive events, move out of viewport */ 
.lt-ie9 input[type=checkbox] { 
    visibility: visible; 
    top: -50px; 
} 

को इनपुट को हिलने नहीं दें छोड़ दिया है या पेज IE में कूद जाएगा जब इनपुट फोकस प्राप्त करता है! (उदाहरण के लिए देखें:: https://github.com/h5bp/html5-boilerplate/blob/master/index.html) .lt-ie8 एक वर्ग है कि इस तरह से पुराने IE संस्करणों के लिए HTML टैग पर सेट कर दिया जाता है

<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]--> 

लेकिन तुम क्रम में दूसरे नियम में गुण लागू करने के लिए अपने पसंदीदा तरीका उपयोग कर सकते हैं केवल पुराना आईई संस्करण। जेएस के माध्यम से नियमों को लागू करना भी काम करना चाहिए, जैसा कि आप ऐसा कर रहे हैं।

+0

यह स्वीकार किए गए एक से बेहतर जवाब है, यह भी जानने के लायक है कि jquery devs को इस मुद्दे के बारे में क्या कहना है, यहां: http://bugs.jquery.com/ticket/8508 –

+0

वास्तव में वास्तव में सहायक है। बहुत बहुत धन्यवाद। –

0

यह IE8 में मेरे लिए काम किया:

<!--[if IE 8 ]> 
<style> 
    input[type=checkbox] { 
    position: absolute; 
    filter: alpha(opacity=0); 
    } 
</style> 
<![endif]--> 
2

Marc Diethelm: छिपे हुए चेक बॉक्स नीचे 9.

संस्करण के रूप में, बजाय visibility: hidden; या display: none, उपयोग आईई संस्करण में घटनाओं प्राप्त नहीं होता है clip: rect(0 0 0 0);

तो इसके बजाय

$('input[type=checkbox]').hide(); 

या

$('input[type=checkbox]').css('visibility', 'hidden'); 

उपयोग कुछ

$('input:checkbox').addClass('hidden'); 

और

input[type=checkbox].hidden { 
    clip: rect(0 0 0 0); 
    position: absolute; /* move out of document flow */ 
} 

यह सामान्य ब्राउज़रों में और IE8 में काम करता है की तरह

+0

बहुत ही सुरुचिपूर्ण समाधान। यह एक सम्मोहन की तरह काम करता है। धन्यवाद! –

+1

नहीं, यह "सुरुचिपूर्ण" नहीं है। क्यों, क्योंकि यह हमेशा के लिए सभी ब्राउज़रों के लिए एक हैक/कामकाज लागू करता है। भले ही पाठ्यक्रम के सभी आधुनिक ब्राउज़र 'दृश्यता: छुपा' के साथ सही व्यवहार का समर्थन करते हैं। आप बहुत यकीन कर सकते हैं कि 'क्लिप' लागू करना बहुत अधिक (!) डिफ़ॉल्ट समाधान से अधिक संगणकीय रूप से महंगा है। –