0

jquery/html/css を使用してチェックボックスとラジオ入力のスタイルを設定しようとしましたが、うまくいきません。

ラジオが機能していません。

機能させるためにどのような変更を加えることができますか?

どうもありがとう ！

[「 + ラベル 」を介して css3 で実行できることは承知していますが、いくつかの理由でうまくいきません。このjqueryが気に入っているのは、無効にしてもブラウザで完全に動作するからです]

これはコードです：

( http://www.filamentgroup.com/examples/customInput/customInput.jquery.js )の変更

jQuery.fn.customInput = function(){
$(this).each(function(i){   
    if($(this).is('input:checkbox,input:radio')){
        var input = $(this);

        // get the associated label using the input's id
        var label = input.next();

        // wrap the input + label in a div 
        var wrapper = $("<div/>");
        if (input.is(':checkbox')) {
            wrapper.addClass("custom-checkbox");
        }
        else {
            wrapper.addClass("custom-radio");
        }
        wrapper.insertBefore(input).append(input, label);

        // necessary for browsers that don't support the :hover pseudo class on labels
        label.hover(
            function(){ 
                if (!this.disabled) {
                    $(this).addClass('hover');
                } 
            },
            function(){ 
                $(this).removeClass('hover'); 
            } 
        );

        //bind custom event and trigger it, then bind click,focus,blur events                   
        input.bind('updateState', function(){   
            label.toggleClass("disabled", input.is(":disabled"));
            if (input.is(':checked')) {
                if (input.is(':radio')) {
                    $('input[name='+input.attr('name')+']').each(function(){
                        $('label[for='+$(this).attr('id')+']').removeClass('checked');
                    });     
                }
                label.addClass('checked');
            }
            else { 
                label.removeClass('checked');
            }
        })
        .trigger('updateState')
        .click(function(){ 
            $(this).trigger('updateState'); 
        })
        .focus(function(){ 
            label.addClass('focus'); 
        })
        .blur(function(){ label.removeClass('focus '); });
    }
});

};

デモ -> http://jsbin.com/uyateb/2/edit

4

1 に答える 1

0

ブラウザの JavaScript コンソールを常に確認してください。それはあなたの友達です。

あなたの例では、エラーが表示されます

Uncaught Error: Syntax error, unrecognized expression: [name=option[218]]

それはこの表現によって引き起こされます

$('input[name='+input.attr('name')+']')

名前の値が単純な名前と異なる場合 (あなたの場合はoption[218])、値の周りに追加の引用符を使用する必要があります。コードを次のように変更します

$('input[name="'+input.attr('name')+'"]')

エラーはなくなりました。

于 2013-07-27T19:36:04.920 に答える