8

jQuery 関数 addClass および removeClass を使用して Internet Explorer (IE) のチェックボックスの外観を変更すると、これらの関数が正しく機能しません。ただし、他のブラウザでは問題なく動作します。

私の問題を説明するためのサンプルコードは次のとおりです。

$('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/

4

2 に答える 2

4

セレクターは、IDが chkbox$('#chkbox')の1つのチェックボックスのみで動作するようにするか、すべてのチェックボックスで動作するようにする必要があります。$('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');
    }
});

デモを参照してください。

問題が解決しない場合は、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-10T10:14:33.963 に答える
1

このセレクターinput:#chkboxは奇妙に思えます。#chkboxID を持つ要素が 1 つしかない場合に試してください#chkbox(これはたまたま<input />フィールドです)。

また、おそらく次の結果をキャッシュする必要があります$('#chkbox')

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

(2番目の引数、テストされていない)で使用.toggleClass()することもできます:switch

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

免責事項
いいえ、これは IE ではなく Fx や Chrome などで機能する理由を説明していません。セレクターの実装はブラウザー間で多少異なると思います。一般に、これは問題を解決することさえできないかもしれませんが、潜在的な問題 (および「よりクリーンな」解決策) を示唆するだけです。

于 2011-03-10T09:49:35.287 に答える