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

Question

第一次posting.

对编程来说不是新手，但对 HTML 和网络编码来说非常新。使用 Adobe Dreamweaver。（任何和所有软件、工具、网站、material 建议表示赞赏）

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

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

最简单的方法是什么？

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

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

当然，最简单的方法最好，但不怕挑战。我是不是有点过头了？

Answer 1

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

首先 HTML：我将输入组合在一起，并为每种类型的输入赋予了自己的 ID。对于我想捆绑在一起的每个组（在这个例子中是第一组和最后一组）我给输入一个相同的 classes（一组中的所有第一个选项具有相同的 class，所有第二个等

<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 中的内联注释以进一步细分）：单击单选按钮时，我使用相同的 class 禁用。然后我遍历兄弟姐妹，看看我可以 re-enable。（在另一组中选中的输入将被设置为/保持禁用状态）

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

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

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

One form, 7 radio button groups, once answer per group, answers can't be the same in each group

html

dreamweaver

radio-group