Question

我想用某种形式给每个选项打分，该值不能是相同的值，我已经通过2维单选按钮完成了操作，接下来的问题是，如果用户未进行排名，则不得进入下一列所有选项，如果javascript文档中只有1个单选按钮更改时，我可以做下一列，所以我有这样做的想法。

$(document).on('change', '.answer1', function(){
$(document).on('change', '.answer2', function(){
$(document).on('change', '.answer3', function(){
$(document).on('change', '.answer4', function(){
$(this).closest('.cont').find('.next').removeAttr("disabled");

有时可以工作，但有时不可以

$('.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');
  console.log(nex);
});

$(document).on('click', '.previous', function() {
  last = parseInt($(this).attr('id'));
  pre = last - 1;
  $('#question' + last).addClass('hide');

  $('#question' + pre).removeClass('hide');
});
$(document).on('change', '.answer1', function() {
  $(document).on('change', '.answer2', function() {
    $(document).on('change', '.answer3', function() {
      $(document).on('change', '.answer4', function() {
        $(this).closest('.cont').find('.next').removeAttr("disabled");
      })
    })
  })
});

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ccc;
  padding: 10px;
}

th:empty {
  border: 0;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(function() {
      var col, el;

      $("input[type=radio]").click(function() {
        el = $(this);
        col = el.data("col");
        $("input[data-col=" + col + "]").prop("checked", false);
        el.prop("checked", true);
      });
    });
  </script>
</head>

<body>
  <form action="quiz6.php">
    <div id='question1' class='cont'>
      <table>
        <tr>
          <th></th>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
        </tr>
        <tr>
          <td>option 1</td>
          <td><input type="radio" name="11>" data-col="11" value="1" class="answer1>" required></td>
          <td><input type="radio" name="11>" data-col="12" value="2" class="answer2>" required></td>
          <td><input type="radio" name="11>" data-col="13" value="3" class="answer3>" required></td>
          <td><input type="radio" name="11>" data-col="14" value="4" class="answer4>" required></td>
        </tr>
        <tr>
          <td>option 2</td>
          <td><input type="radio" name="12>" data-col="11" value="1" class="answer1>" required></td>
          <td><input type="radio" name="12>" data-col="12" value="2" class="answer2>" required></td>
          <td><input type="radio" name="12>" data-col="13" value="3" class="answer3>" required></td>
          <td><input type="radio" name="12>" data-col="14" value="4" class="answer4>" required></td>
        </tr>
        <tr>
          <td>option 3</td>
          <td><input type="radio" name="13>" data-col="11" value="1" class="answer1>" required></td>
          <td><input type="radio" name="13>" data-col="12" value="2" class="answer2>" required></td>
          <td><input type="radio" name="13>" data-col="13" value="3" class="answer3>" required></td>
          <td><input type="radio" name="13>" data-col="14" value="4" class="answer4>" required></td>
        </tr>
        <tr>
          <td>option 4</td>
          <td><input type="radio" name="14>" data-col="11" value="1" class="answer1>" required></td>
          <td><input type="radio" name="14>" data-col="12" value="2" class="answer2>" required></td>
          <td><input type="radio" name="14>" data-col="13" value="3" class="answer3>" required></td>
          <td><input type="radio" name="14>" data-col="14" value="4" class="answer4>" required></td>
        </tr>
      </table>
      <button id='1' class='next btn btn-success' type='button' disabled>Next</button>
</body>

</html>

说实话，我不知道它为什么起作用/不起作用。我不知道是否可以通过我的方式来做，这是更好的主意吗？

Answer 1

您可以添加条件来检查总计选中的单选按钮，如下所示。

$("input[type=radio]").click(function() {
    el = $(this);
    col = el.data("col");
    $("input[data-col=" + col + "]").prop("checked", false);
    el.prop("checked", true);
    if($("input[data-col]:checked").length == 4){
        $("button").prop('disabled',false);
    }else{
        $("button").prop('disabled',true);
    }
  });

我希望它将对您有所帮助。（我直接使用了按钮，这可能与页面上的其他按钮冲突。）

如果选中/选中所有2维单选按钮，则启用按钮

1 个答案: