jquery - 如果使用 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。在弗雷德里克·哈米迪先生(在我们下面的讨论中)的帮助下，我们修改了我的职能。这是最新版本:

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