【问题标题】:Limit checkboxes with jquery based on checked radio buttons根据选中的单选按钮限制带有 jquery 的复选框
【发布时间】:2012-06-07 14:30:12
【问题描述】:

所以,我对某些复选框有这个问题。首先让我告诉你关于“项目”本身。这是一个网络表单,用户必须完成它并根据他想要购买的内容检查一些复选框和单选按钮。首先是 2 个无线电子弹,编号为 1 和 2,代表他要购买的产品的数量。旁边是大约 5 个代表产品颜色的复选框,不管它们有多少,问题是......我想要,当用户在单选按钮上选择 1 时,只有 1 个复选框活动,如果他选择 2,那么只有 2 个复选框可供检查。所以..有人可以帮助我吗?我想到了 jQuery,但我不知道...

有两个 div,ID 为 #radioButtons 的第一个 div 有 2 个单选按钮,第二个 div 有其余的复选框。

【问题讨论】:

    标签: jquery checkbox radio


    【解决方案1】:

    你没有在你的帖子中给出任何标记,所以我猜是这样的:

    HTML

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

    jQuery

    $('#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);
    });
    

    Sample workout

    【讨论】:

    • 你没看懂,有2个radio,但是只能选择一个,如果选择了第一个,那么只能选择1个复选框。如果选择了第二个单选按钮,则有 2 个复选框可供选择。 HTML 标记如下所示: '

      ​​​​'
    【解决方案2】:

    我们可能会使用 real HTML 源代码,出现问题的地方。

    编辑

    我无法理解您为什么要这样做。从可用性的角度来看,这个解决方案非常不寻常,可能有点糟糕。让我问几个问题。

    • 您为什么希望它这样工作?
    • 您想让用户选择什么?

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

    【讨论】:

      【解决方案3】:

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

      【讨论】:

        【解决方案4】:

        请看Sample

        我正在维护radio的id中要创建的复选框的数量,并在div中动态创建复选框。

        编辑:

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

        【讨论】:

        • jsfiddle.net/vncatalin/C6SpM/6 这是 html 标记的样子,如果用户选择第一个单选按钮,则只有一个复选框可供选择,如果用户选择另一个单选,则 2 个复选框将可供选择,但它们从一开始都是可见的,我不希望它们被动态创建。
        • 我检查了它,我在上面回答了我遇到的问题
        • @Hiskie 请看我上面的编辑。我刚刚更新了你给的小提琴。
        猜你喜欢
        • 1970-01-01
        • 2012-06-05
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2010-10-27
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多