Html 一种形式，7个单选按钮组，每组回答一次，答案可以'；B:I don’’每组都不一样

第一次张贴

对编程并不陌生，但对HTML和web编码非常陌生。使用AdobeDreamweaver。（感谢所有软件、工具、网站、材料建议）

目标：我需要在表单上创建13组单选按钮，每组（1-13）有13个选项。每组只能有一个答案，并且不能在第二组中选择每组中的答案。大致是这样的，这里有13个事件，把它们按顺序排列，1你最喜欢13你最不喜欢

我在网上做了一些调查，在这里看到一篇帖子，上面有不止一组单选按钮，但每组只有一个选择。我需要每个组都有一个与其他组选择不同的选择，因此组1和组4不能都有相同的选择10

最简单的方法是什么

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

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

---

当然，最简单的方法是最好的，但不要害怕挑战。我是不是有点不知所措？

所以，通常我不会帮你回答这个问题，因为我认为你应该先尝试一下，然后提出你遇到的问题（不仅仅是问代码）。然而，这个谜题引起了我的兴趣，所以我想出了下面的解决方案。（在这个演示中，我使用了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 -->

---

使用此方法，用户只能单击以前未选择的单选按钮。如果答案已更改，则如果未选择其他类似输入，则其他选项将再次可用。以下是小提琴：）

我推荐Sublime text 3。它具有高度的可定制性，并且有很好的工作流增强工具：）Sublime text 3：插件：非常感谢。我非常高兴你决定作出回应。不幸的是，我对网络的了解似乎比我以前想象的要少。我可以看到它在某种程度上是如何工作的，我看到它在小提琴中工作。把它转移到我自己的项目中，试图进一步理解它，这让我意识到我以前对整个主题的了解是多么的少。我将不得不看一两门在线课程，试图更好地理解它是如何工作的，以及把什么放在哪里。再次感谢你，如果有的话，帮助我走上正确的方向。

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);