Question

第一次发帖。

不是编程新手，但对HTML和网络编码来说并不陌生。使用adobe dreamweaver。（任何和所有软件，工具，网站，材料建议赞赏）

目标：我需要在表格上制作13组单选按钮，每组13个选项（1-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（您可以查看小提琴中的内嵌注释以进一步细分）：单击单选按钮时，我将禁用相同类的所有输入。然后我循环遍历兄弟姐妹，看看我可以重新启用哪些。（在另一个组中检查的输入将被设置为/保持禁用状态）

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/

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

1 个答案: