一个表格，7个单选按钮组，每组一个答案，每组答案不能相同

Question

第一次发帖。

对编程并不陌生，但对 HTML 和 Web 编码却很陌生。使用 Adob​​e Dreamweaver。 （任何和所有软件、工具、网站、材料建议都表示赞赏）

目标：我需要在表单上制作 13 组单选按钮，每组 (1-13) 有 13 个选项。每组只能有一个答案，每组的答案不能在第二组中选择。大致如下，这里有 13 个事件，按顺序排列，1 个你最喜欢 13 个你最不喜欢。

我做了一些在线研究，发现这里有一个帖子，其中包含一组以上的单选按钮，但每个组只有一个选项。我需要每个组都有一个与其他组选择不同的选择，因此第 1 组和第 4 组不能都有相同的 10 选择。

最简单的方法是什么？

我考虑过让每个组都有自己的页面和提交按钮。提交按钮将发送选择并移至下一个事件。

我目前正在尝试的方法是将它们全部放在一个页面上。

当然，最简单的方法是最好的，但不要害怕挑战。我在我头上吗？

Answer 1

因此，通常我不会帮助解决这个问题，因为我认为您应该先尝试一下，然后提出您遇到的问题（不仅仅是询问代码）。然而这个谜题引起了我的兴趣，所以我想出了下面的解决方案。 （对于这个演示，我使用了 3 个组，每组 3 个，但是使用此代码，您可以使用任意数量的组和每组任意数量的输入

首先是 HTML：我将输入分组在一起，并为每种类型的输入分配了自己的 id。对于我想捆绑在一起的每个组（在本例中是第一组和最后一组），我给输入一个相同的类（组中的所有第一个选项都具有相同的类，所有的第二个，等等。

<div class="group">
  <input type="radio" name="group1" class="option1" id="test1">
  <label for="test1">Option 1</label>
  <input type="radio" name="group1" class="option2" id="test2">
  <label for="test2">Option 2</label>
  <input type="radio" name="group1" class="option3" id="test3">
  <label for="test3">Option 3</label>
</div> <!-- /group -->
<div class="group">
  <input type="radio" name="group2" class="option1" id="test4">
  <label for="test4">Option 1</label>
  <input type="radio" name="group2" class="option2" id="test5">
  <label for="test5">Option 2</label>
  <input type="radio" name="group2" class="option3" id="test6">
  <label for="test6">Option 3</label>
</div> <!-- /group -->
<div class="group">
  <input type="radio" name="group3" class="option1" id="test7">
  <label for="test7">Option 1</label>
  <input type="radio" name="group3" class="option2" id="test8">
  <label for="test8">Option 2</label>
  <input type="radio" name="group3" class="option3" id="test9">
  <label for="test9">Option 3</label>
</div> <!-- /group -->

接下来，Javascript（您可以查看 fiddle 中的内联 cmets 以进行进一步细分）：单击单选按钮时，我将禁用同一类的所有输入。然后我遍历兄弟姐妹，看看我可以重新启用哪些。 （在另一组中检查的输入将设置为/保持禁用）

function radioButtonClicked() {
  var theClass = $(this).attr('class');
    $('.' + theClass).not($(this)).attr('disabled', 'disabled');
    $(this).siblings('input[type="radio"]').each(function(){
      var otherClasses = $(this).attr('class');
      $('.' + otherClasses).each(function(){
        if($(this).prop('checked')) {
          $('.' + $(this).attr('class')).not($(this)).attr('disabled', 'disabled');
          return false;
        } else {
          $('.' + $(this).attr('class')).removeAttr('disabled');
        }
     });
  });
}
$('.group input[type="radio"]').on('change', radioButtonClicked);

使用此方法，用户将只能单击以前未选中的单选按钮。如果更改了答案，如果没有选择其他类似的输入，则其他选项将再次可用。这是小提琴:) https://jsfiddle.net/owkcq1vs/45/