Question

我正在使用jquery工具验证器插件，我有一个包含多个部分的表单。每个部分顶部都有一个复选框，我想成为每个部分的主开关 - 以编程方式打开/关闭文本框的功能（如验证）。每个部分的电子邮件字段。

基本上，如果选中相应的组复选框，我想有条件地将'text'和/或'email'类型输入字段的属性设置为“required”。不可否认，我对jQuery并不是那么好。

每个表单部分与下面的内容类似，但可能包含不同数量的文本和/或电子邮件字段：

<input type="checkbox" group-name="mail" name="mail" id="mail_enable"
       checked="<?= (chkConfig("mail_enable", 0) ? "yes" :  "no"); ?>"
       onChange="chkRequired('mail');"   
       title='check this box to send the specified reports to your email.' > 
       <label for="mail_enable">notify me when the batch is complete.</label></div>
  <div class="left"><label for="lblemailid">Email Address: </label></div>
  <div class="right"><input type="email" group-name="mail" name="mailto" 
       id="emailAddress" size="30" maxlength="50" />

我创建了一个名为group-name的属性，并且一个部分中的所有字段共享相同的组名。在FrédéricHamidi先生的帮助下（我们在下面的讨论中），我们修改了我的职能。这是最新版本：

  function chkRequired(group){ 
    var groupCheckBox = $("#" + group + "_enable");
    var groupSelector = "[group-name='" + groupCheckBox.attr("group-name") + "']";
    var fieldSelector = "input[type=text], input[type=email]";
     if  ( $(groupCheckBox).is(':checked'))  {
        $(groupSelector).add(fieldSelector).attr("required");
       } else { 
        $(groupSelector).add(fieldSelector).removeAttr("required");
     }
   }

我希望这可以帮助处于类似情况的其他人。

我仍然无法弄清楚选择器语法将它全局附加到doc.ready（）amd .change（）。但是如果您手动将函数分配给字段的onChange事件，它就可以工作。

此外，如果有人可以帮助我使用validator.addMethod（）的语法，那么我们可以创建一个自定义验证方法 - 这将是值得赞赏的。

特别感谢FrédéricHamidi先生帮助我制定逻辑。

如果有人对@ http://www.logicwizards.net/2010/12/07/jquery-tools-custom-validator-mod/

感兴趣，我已经创建了更详细的教程

Joe Negron：Logic Wizards~YYC

Answer 1

好吧，$('#'+groupName).val()会返回undefined，因为您的复选框与#mail_enable匹配，而不是#mail。您甚至不需要再次计算它，因为您之前使用它来获取组名称。

此外，val()会返回复选框的值，而不是其检查状态。您需要checked属性（或:checked选择器）：

function chkRequired(group)
{
    var groupCheckBox = $("#" + group + "_enable");
    var groupSelector = "[group-name='" + groupCheckBox.attr("group-name") + "']";
    if (groupCheckBox.is(":checked")) {
        $("input:text" + groupSelector).attr("required", "required");
        $("input[type='mail']" + groupSelector).attr("required", "required");
    } else { 
        $("input:text" + groupSelector).removeAttr("required");
        $("input[type='mail']" + groupSelector).removeAttr("required");
    }
}

如果使用jQuery选中复选框，则有条件地将输入字段的属性设置为必需

1 个答案: