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

Question

我正在使用 jquery Tools 验证器插件，并且我有一个包含多个部分的表单。每个部分的顶部都有一个复选框，我希望它像每个部分的主开关 - 以编程方式打开/关闭每个部分中文本框和电子邮件字段的功能（如验证）。

基本上，如果选中了相应的组复选框，我想有条件地将“文本”和/或“电子邮件”类型输入字段的属性设置为“必需”。不可否认，我对 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 的属性，并且一个部分中的所有字段共享相同的 group-name。在 Frédéric Hamidi 先生的帮助下（在我们下面的讨论中），我们修改了我的功能。这是最新版本：

  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() 和 .change() 全局的选择器语法。但如果您手动将函数分配给字段的 onChange 事件，它会起作用。

另外，如果有人可以帮助我了解 validator.addMethod() 的语法，那么我们可以创建一个自定义验证方法 - 将不胜感激。

特别感谢 Frédéric Hamidi 先生帮助我弄清楚逻辑。

如果有人有兴趣，我已经创建了一个更详细的教程@http://www.logicwizards.net/2010/12/07/jquery-tools-custom-validator-mod/

Joe Negron：逻辑奇才 ~ 纽约

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");
    }
}