基于选中单选按钮使用jquery限制复选框

所以，我有一些复选框的问题。首先让我告诉你关于这个项目本身的情况。这是一个网络表单，用户必须完成它，并选中一些复选框和单选按钮，这取决于他想购买什么。第一个是2个无线电项目符号，编号为1和2，代表他想要购买的产品的数量。旁边是5个代表产品颜色的复选框，不管有多少，关键是。。。我希望，当用户在单选按钮上选择1时，只有1个复选框处于活动状态，如果用户选择2，则只有2个复选框可供选中。所以有人能帮我吗？我想到了jQuery，但我不知道

---

有两个div，id为的第一个div有两个单选按钮，第二个div有其余的复选框

您可以将单击事件添加到复选框中，然后在事件处理程序中检查允许的最大复选框的条件，然后根据是否已达到该限制返回true或false。

您的帖子中没有给出任何标记，因此我猜是这样的：

HTML

请看

我维护要在收音机id中创建的复选框的数量，并在div中动态创建复选框

编辑：

我更新了你给我的小提琴。请看一看

我们可能会使用出现问题的真正HTML源代码

编辑：

我很难理解你为什么要这么做。从可用性的角度来看，这个解决方案很不寻常，可能有点糟糕。让我问你几个问题

你为什么想让它这样工作？ 您想让您的用户选择什么？

---

有很多内联选择的可能性，著名的例子是在apple.com上选择iPad类型。但最重要的是为您的用户提供易于理解且使用感觉良好的用户界面。

您不了解，共有2个收音机，但只能选择一个，如果选择了前1个，则只能选择1个复选框。如果选择了第二个单选按钮，则有两个复选框可供选择。HTML标记如下所示：'​​​​' 这就是html标记的外观，如果用户选择第一个单选按钮，则只有一个复选框可供选择，如果用户选择另一个单选按钮，则有两个复选框可供选择，但它们从一开始就可见，我不希望动态创建它们。我选中了它，我在上面回答了我的问题have@Hiskie请看我的编辑上面。我刚刚更新了你给我的小提琴。

<div id="radioButtons">
  <input type="radio" name="quantity" id="radio1">
  <input type="radio" name="quantity" id="radio2">
</div>
<div class="checkBoxes">
  Color 1:<input type="checkbox" name="color" disabled="disabled">
  Color 2:<input type="checkbox" name="color" disabled="disabled">
  Color 3:<input type="checkbox" name="color" disabled="disabled">
  Color 4:<input type="checkbox" name="color" disabled="disabled">
  Color 5:<input type="checkbox" name="color" disabled="disabled">
</div>

$('#radio1').on('change', function() {
    $('.checkBoxes :checkbox').prop('disabled', true);
    $(':checkbox:eq(0)').prop('disabled', false);
});

$('#radio2').on('change', function() {
    $('.checkBoxes :checkbox').prop('disabled', true);
    $(':checkbox:eq(0), :checkbox:eq(1)').prop('disabled', false);
});