addClass 및 removeClass가 Internet Explorer에서 작동하지 않습니다.

jQuery 함수 addClass 및 removeClass를 사용하여 인터넷 익스플로러 (IE)의 확인란 모양을 변경하면 제대로 작동하지 않습니다. 그러나, 그들은 다른 브라우저에서 잘 작동합니다.addClass 및 removeClass가 Internet Explorer에서 작동하지 않습니다.

$('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"); 
     } 
    });

더이를 테스트하려면 (IE에서 작동하지 않습니다) jsFiddler를 사용하여 코드를 실행할 수 있습니다 : 는 http://jsfiddle.net/tejek/pZJMd/

출처

2011-03-10 Tejek

이 선택 input:#chkbox 보인다 여기

내 문제를 설명하는 샘플 코드 기묘한. ID가 #chkbox 인 요소가 하나만있는 경우 #chkbox을 시도하십시오 (이 경우는 <input /> 필드 임).

또한, 당신은 아마, $('#chkbox')의 결과를 캐시한다 예를 들면 : (. 두 번째 인수, 검증되지 않은)

당신은 심지어 switch와 .toggleClass()을 사용할 수

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

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

면책 조항
아니요, IE에서 Fx, Chrome 등에서 작동하는 이유는 설명하지 않습니다. 나는 셀렉터 구현이 브라우저간에 다소 다르다고 생각한다. 일반적으로 이것은 문제를 해결할 수는 없지만 잠재적 인 문제 (그리고 "더 깔끔한"해결책)만을 암시합니다.

출처

2011-03-10 09:49:35 jensgram

"$ type ="체크 박스 "/>"라는 것이 확실하다면,'$ chkbox.checked', cf. [요소의 속성에 액세스하려면 jQuery의 강력한 기능을 활용하십시오.] (http://whattheheadsaid.com/2010/10/utilizing-the-awesome-power-of-jquery-to-access-properties-of-an-element). – jensgram

당신이 하나의 체크 박스, ID chkbox와 함께 한 작업 할 경우 당신의 선택 중 하나 $('#chkbox')를해야한다, 또는 당신이 모든 체크 박스를 작업 할 경우는 $('input:checkbox')을해야합니다.

또한 마우스 클릭 이외의 변경으로 인해 클릭 이벤트 (이론적으로)가 발생해서는 안되기 때문에 click 이벤트 대신 change 이벤트를 사용하는 것이 좋습니다.

$('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을 수동으로 추가 및 제거하여 클래스를 추가하는 것이 아니라 이상한 쿼크 모드 렌더링 또는 기타로 클래스를 추가하는 효과가 나타나지 않는지 확인하십시오.

같은 것을 사용하여 HTML을 시작해야합니다 :

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

는 항상 IE 렌더링 엔진을 최대한 얻고 있는지 확인 할 수 있습니다.

출처

2011-03-10 10:14:33 rsp

+1 좋은 지적. – jensgram

감사합니다. 이제 IE에서 가장 많이 렌더링되는 문제를 해결하는 방법을 알게되었습니다. –

addClass 및 removeClass가 Internet Explorer에서 작동하지 않습니다.

답변

관련 문제