好的,所以我创建了一个测验,按1依次显示问题,每个问题都有上一个和下一个按钮(除了第一个,只有下一个按钮,最后一个问题有上一个和提交按钮)。我想要的是防止用户先检查下一个问题而不先选中单选按钮(给出答案),所以这是我的代码
我使用了引导程序css
和其他css
.container {
margin-top: 110px;
}
.error {
color: #B94A48;
}
.form-horizontal {
margin-bottom: 0px;
}
.hide{display: none;}
这是我的第一个PHP问题代码,假设变量i = 1
<?php if($i==1){?>
<div id='question<?php echo $i;?>' class='cont'>
<?php echo "<h4>".$row['opt1']."</h4>"; ?>
<input required type="radio" name="<?php echo $row['id'];?>" value="1" id="a1">
<input required type="radio" name="<?php echo $row['id'];?>" value="2" id="a1">
<?php echo "<h4>".$row['opt2']."</h4>";?>
<br>
<button id='b<?php echo $i;?>' class='next btn btn-success' type='button' disabled="disabled">Next</button></center>
</div>
<?php }?>
最后我用这个javascript来下一个问题
$('.cont').addClass('hide');
count=$('.questions').length;
$('#question'+1).removeClass('hide');
$(document).on('click','.next',function(){
last=parseInt($(this).attr('id'));
nex=last+1;
$('#question'+last).addClass('hide');
$('#question'+nex).removeClass('hide');
});
$(document).on('click','.previous',function(){
last=parseInt($(this).attr('id'));
pre=last-1;
$('#question'+last).addClass('hide');
$('#question'+pre).removeClass('hide');
});
我已经尝试过阅读的任何建议
if(document.getElementById('a1').checked) {
$('.next').removeAttr("disabled");
该条件仅在单选按钮处于选中状态时发生,因此,如果我单击上一个按钮,则下一个按钮已启用。
我接受任何建议,除了使用javascript之外还有其他方法吗?
答案 0 :(得分:2)
首先,您可以在单选按钮上添加课程
<input required type="radio" name="<?php echo $row['id'];?>" value="1" id="a1" class="answer">
<input required type="radio" name="<?php echo $row['id'];?>" value="2" id="a1" class="answer">
然后您可以使用它。当单选按钮更改时,此代码将删除下一个类禁用的属性。
$(document).on('change', '.answer', function(){
$(this).closest('.cont').find('.next').removeAttr("disabled");
});