2

jQuery（ fiddle ）を使用して簡単なカスタムチェックボックスを作成しようとしています。

実際のチェックボックスをオン/オフにしない理由がわかりません。Idsセレクターは正しく渡されるため、リアルタイム値も正しく渡されます。

関連するhtml：

<div id="corpo">
<div id="checkoptions">
<div><label>Option 1 <input type="checkbox" id="option1" checked></label></div>
</div>
</div>

関連するJavaScript：

// custom checkboxes
$('#corpo input[type=checkbox]').each(function(){

    var checkbox = $(this), checkid = checkbox.attr('id'),
            checked =  '', content = '&#10007;';

    if(checkbox.is(':checked')){ var checked =  ' checked', content = '&#10003;'; }

    checkbox.hide()
            .after('<div class="checkbox'+checked+'" id="c-'+checkid+'"><span>'+content+'</span></div>');
});

// update custom checkboxes values
$('#corpo').on('click','.checkbox',function(){

    var fakeCheckbox = $(this),
            realID = fakeCheckbox.attr('id').replace('c-',''),
            realCheckbox = $('#'+realID), checked = realCheckbox.is(':checked');

    if(checked){

        realCheckbox.attr('checked',false);
        fakeCheckbox.removeClass('checked').find('span').html('&#10007;');

    }else{

        realCheckbox.attr('checked',true);
        fakeCheckbox.addClass('checked').find('span').html('&#10003;');

    }

});

prop('checked',false)のremoveAttr('checked')代わりに使用するために、元のチェックボックスを再表示しようとしましたattr('checked',false)。

実際のチェックボックスも更新する必要があります。「偽の」チェックボックスでクラスを切り替えるだけでは不十分です。

4

2 に答える 2

2 
$('#corpo').on('click','.checkbox',function(e){
    var isChecked = $(this).is('.checked');
    $(this).html(isChecked ? '&#10007;' : '&#10003;').toggleClass('checked');
    $('#'+this.id.replace('c-','')).prop('checked', !isChecked);

  //solve the annoying select issue
    document.onselectstart = function() { return false; };
    e.target.ondragstart = function() { return false; };
    return false;
});

フィドル

于 2012-10-27T17:02:00.180 に答える
1

is(':checked')、コードの変更、および ID 検出の削除に問題がありました:

// update custom checkboxes values
$('#corpo .checkbox').on('click',function(){
    var fakeCheckbox = $(this),
        realCheckbox = $(this).siblings('input'),
    checked = fakeCheckbox.hasClass('checked');
    if(checked){
        fakeCheckbox.removeClass('checked').find('span').html('&#10007;');
        realCheckbox.removeAttr('checked');
    }else{
        fakeCheckbox.addClass('checked').find('span').html('&#10003;');
        realCheckbox.attr('checked','checked');
    }
});
于 2012-10-27T17:42:28.100 に答える