Question

问题：我有两个单选按钮;如果用户选择一个，则会出现3个复选框的列表。必须至少选中其中一个复选框。我如何将其转化为优雅的规则？

html：

subOption1_cb:
            required:{
                depends: function(el) {
                    return ($("#option1_radio:selected") && $("#subOption2:checked").length == 0 && $("#subOption3:checked").length == 0);
                }
            },
        subOption2_cb:
            required:{
                depends: function(el) {
                    return ($("#option1_radio:selected") && $("#subOption1:checked").length == 0 && $("#subOption3:checked").length == 0);
                }
            },
        subOption3_cb:
            required:{
                depends: function(el) {
                    return ($("#option1_radio:selected") && $("#subOption2:checked").length == 0 && $("#subOption1:checked").length == 0);
                }
            }

我目前拥有的是......但我希望有一个更优雅的解决方案。

{{1}}

Answer 1

你有很多问题阻止它正常工作......

此插件考虑进行验证的任何元素必须包含name属性，但您没有。由于所有复选框都是分组的一部分，因此它们可以共享相同的name。然后，通过将required规则分配给此name，您将自动要求该组中至少有一个复选框。
您的对象文字构造不正确。您错过了每个{}之后围绕规则集的开始/结束括号name。
您的"#option1_radio:selected"选择器与您的无线电元素的id不匹配。您还需要jQuery :checked方法中的radio元素的.is()选择器，而不是:select。
```
$("#optionB_radio").is(":checked")
```
删除disabled="disabled"或始终忽略这些元素。

rules对象：

rules: {
    subOption: { // <- this MUST be the NAME attribute and include braces
        required: {
            depends: function(el) {
                return $("#optionB_radio").is(":checked");
            }
        }
    },
    // other elements
}

HTML：

<label><input id="optionB_radio" type="radio">Option B</label>

<input name="subOption" id="subOption1_cb" type="checkbox">sub option 1</label>  
<input name="subOption" id="subOption2_cb" type="checkbox">sub option 2</label> 
<input name="subOption" id="subOption3_cb" type="checkbox">sub option 3</label>

工作演示：http://jsfiddle.net/fzz7yyL6/

jQuery Validate Plugin：如果选中单选按钮，则在一组复选框上设置规则

1 个答案: