2

何らかの理由で、このフォームのチェックボックスはクリックできず、Google Chrome を使用すると非常に小さくなります。Firefox を使用している場合、チェックボックスはうまく機能します。何を探すべきか正確にはわかりません...それは本当に奇妙です!!! 私の使い方に何か問題があり<form>ますか?すべての css を無効にしてもインスペクターを使用すると、チェックボックスはまだ小さいです。何が起こっているのかわからない。ブラウザのキャッシュなどをリセットすると、本当に助けになるかもしれません。

HTML: http://pastebin.com/Pt6YgGP7 :

CSS: http://pastebin.com/WHap5Vmh

スクリーンショット:

小さなチェックボックス

    <div class="categories">
    <button class="tyl_category" id="category1">Category1</button>          
    </div>  
    <form name ="things-you-like-form" class="sub-categories" action="things-you-like">

        <div class="control-group">
            <div class="controls category" id="form-category1">
                Select from Category 1
                <input type="checkbox" name="tyl_picked1" value="c1s1">
                <label for "category1-subcategory1">1.1</label>
                <input type="checkbox" name="tyl_picked1" value="c12">
                <label for "category1-subcategory2">1.2</label>
                <input type="checkbox" name="tyl_picked1" value="c1s3">
                <label for "category1-subcategory3">1.3</label>
                <input type="checkbox" name="tyl_picked1" value="c1s4">
                <label for "category1-subcategory4">1.1</label>
            </div>
        </div>
        <!-- end for-each sub-categores -->


    </form>


</div>

JS

<script>
$(document).ready(function() {
    $('form').each(function() { this.reset() });
    var progress = 0;

    $categories = $('.categories');
    $sub_categories = $('.sub-categories');

    $(document).on('click','.tyl_category', function(e) {

        $form = $('#form-'+this.id);
        console.log(this.id);
        $categories.hide('slide', { direction: 'left' }, 250, function() {
            $sub_categories.show();
            $form.show('slide', { direction: 'right' },250);
        });
    });

    $(document).on('click','input[type="checkbox"]', function (e) {
        var $this = $(this);
        var $progress_bar = $('#tyl_progress_bar');
        if ($this.is(':checked')) {
            progress +=1;
        } else {
            progress -=1;
        }
        $progress_bar.text('Step '+progress+'/5');
        $progress_bar.css({width: (progress*25)+"%"});  
        $form = $this.parent('div');
        $form.hide('slide', { direction: 'left' }, 250, function() {
            $sub_categories.show();
            $categories.show('slide', { direction: 'right' },250);
        });


    });

});
</script>
4

1 に答える 1