2011-03-10 20 views
7

में काम नहीं कर रहा है jQuery फ़ंक्शंस addClass और removeClass इंटरनेट एक्सप्लोरर (आईई) में चेकबॉक्स की उपस्थिति को बदलने के लिए उनका उपयोग करते समय ठीक से काम नहीं करते हैं। हालांकि, वे अन्य ब्राउज़रों में ठीक काम करते हैं।ऐडक्लस और हटाएं क्लास इंटरनेट एक्सप्लोरर

$('input:#chkbox').click(function() 
    { 
     //if($(this).is(":checked")){ 
     if($('input:#chkbox').is(":checked")) 
     { 
      $('input:#chkbox').next("label").addClass("etykieta_wybrana"); 
     } 
     else 
     { 
      $('input:#chkbox').next("label").removeClass("etykieta_wybrana"); 
     } 
    }); 

आगे इस परीक्षण के लिए, आप jsFiddler का उपयोग कर कोड चला सकते हैं (IE में काम नहीं करता है): http://jsfiddle.net/tejek/pZJMd/

उत्तर

1

इस चयनकर्ता input:#chkbox लगता

यहाँ मेरी समस्या को वर्णन करने के नमूना कोड है अजीब। #chkbox आज़माएं यदि आपके पास आईडी #chkbox के साथ केवल एक तत्व है (और यह <input /> फ़ील्ड होता है)।

इसके अलावा, आप शायद परिणाम $('#chkbox') की, कैश चाहिए जैसे: (। दूसरा आर्ग, untested)

var $chkbox = $('#chkbox'); 
$chkbox.click(function() { 
    if ($chkbox.is(":checked")) { 
     $chkbox.next("label").addClass("etykieta_wybrana"); 
    } else { 
     $chkbox.next("label").removeClass("etykieta_wybrana"); 
    } 
}); 

तुम भी एक switch साथ .toggleClass() इस्तेमाल कर सकते हैं:

var $chkbox = $('#chkbox'); 
$chkbox.click(function() { 
    $chkbox.next("label").toggleClass("etykieta_wybrana", $chkbox.is(":checked")); 
}); 

अस्वीकरण
नहीं, यह स्पष्ट नहीं करता है कि यह एफएक्स, क्रोम इत्यादि में क्यों काम करता है और आईई में नहीं। मुझे लगता है कि चयनकर्ता कार्यान्वयन ब्राउज़र के बीच कुछ अलग है। आम तौर पर, यह समस्या को हल भी नहीं कर सकता है बल्कि संभावित समस्याओं (और एक "क्लीनर" समाधान) पर संकेत देता है।

+0

वैकल्पिक रूप से, '$ ​​chkbox.checked' अगर आप निश्चित हैं कि यह '<इनपुट प्रकार =" चेकबॉक्स "/>', सीएफ है। [किसी तत्व के गुणों तक पहुंचने के लिए jQuery की अद्भुत शक्ति का उपयोग करें] (http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element)। – jensgram

4

आपका चयनकर्ता या तो $('#chkbox') होना चाहिए, अगर आप उसे केवल एक चेकबॉक्स, आईडी chkbox के साथ एक साथ काम करना चाहते हैं, या इसे $('input:checkbox') होना चाहिए अगर आप इसे हर चेकबॉक्स के साथ काम करना चाहते हैं।

इसके अलावा, क्लिक ईवेंट के बजाय परिवर्तन ईवेंट का उपयोग करना बेहतर है क्योंकि क्लिक ईवेंट (सैद्धांतिक रूप से) आग लगाना चाहिए यदि माउस क्लिक से कुछ और किया गया हो।

$('input:checkbox').change(function() { 
    var $this = $(this); 
    if($this.is(':checked')) { 
     $this.next('label').addClass('etykieta_wybrana'); 
    } else { 
     $this.next('label').removeClass('etykieta_wybrana'); 
    } 
}); 

DEMO देखें:

हो सकता है कि कुछ इस तरह की कोशिश करो।

यदि यह मदद नहीं करता है तो HTML में मैन्युअल रूप से कक्षाओं को जोड़ने और निकालने का प्रयास करें ताकि यह देखने के लिए कि समस्याएं कक्षाएं नहीं जोड़ रही हैं लेकिन कुछ अजीब quirks मोड प्रतिपादन या कुछ द्वारा कक्षाओं को जोड़ने के प्रभाव दिखा नहीं रही है।

कुछ इस तरह के साथ अपने HTML शुरू करने के लिए सुनिश्चित करें:

<!doctype html> 
<html lang="en-us"> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1"> 

यह सुनिश्चित करें कि आप हमेशा IE प्रतिपादन इंजन का अधिकतम लाभ उठा रहे हो।

+0

+1 अच्छा अंक। – jensgram

+0

धन्यवाद, अब मुझे पता चला है, आईई में सबसे अधिक प्रतिपादन समस्या कैसे प्राप्त करें –