何らかの理由で、このフォームのチェックボックスはクリックできず、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>