检查单选按钮时如何使用PHP,JS删除禁用的按钮

时间:2018-09-14 03:43:47

标签: javascript php jquery

好的,所以我创建了一个测验,按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之外还有其他方法吗?

1 个答案:

答案 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");
});